These docs are for an old release.
Info on upgrading to v5
selectable
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>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
defaultView: 'dayGridMonth',
selectable: true
});
...
</script>