selectable

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

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 handlers 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 handler.

Loading the Interaction Plugin#

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

import { Calendar } from 'fullcalendar';
import interactionPlugin from 'fullcalendar/interaction'; // for selectable
import dayGridPlugin from 'fullcalendar/daygrid'; // for dayGridMonth view
...
const calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin, dayGridPlugin ],
  initialView: 'dayGridMonth',
  selectable: true
});
...

Alternatively, you can use a global bundle:

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/all/global.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/global.js'></script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/skeleton.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/theme.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/palettes/purple.css' rel='stylesheet' />
<script>
...
const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  selectable: true
});
...
</script>