This version is in beta. Read the release notes


Allows a user to highlight multiple days or timeslots by clicking and dragging.

Boolean, default: false

To let the user make selections by clicking and dragging, the interaction plugin must be loaded and this option must be set to true. See a demo ยป

The select and unselect callbacks will be useful for monitoring when selections are made and cleared.

To learn the ways in which selections can be cleared, read the docs for the unselect callback.

Loading the Interaction Plugin

You must load the interaction plugin in order for selectable to work. You can do this with and ES6 build system:

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction'; // for selectable
import dayGridPlugin from '@fullcalendar/daygrid'; // for dayGridMonth view
let calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin, dayGridPlugin ],
  defaultView: 'dayGridMonth',
  selectable: true

Alternatively, you can use script tags and browser globals:

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultView: 'dayGridMonth',
  selectable: true