# selectable

> FullCalendar v5 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v5/selectable
>
> Latest version (v7): https://fullcalendar.io/docs/selectable.md

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

<div class='spec' markdown='1'>
Boolean, *default*: `false`
</div>

To let the user make selections by clicking and dragging, the `interaction` plugin **must be loaded** and this option must be set to `true`.
<a href='https://legacy.fullcalendar.io/v5/date-clicking-selecting-demo' class='more-link'>See a demo</a>

The [select](https://legacy.fullcalendar.io/v5/select-callback.md) and [unselect](https://legacy.fullcalendar.io/v5/unselect-callback.md) 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](https://legacy.fullcalendar.io/v5/unselect-callback.md) callback.

## Loading the Interaction Plugin

You must load the interaction plugin in order for `selectable` to work. You can do this with [an ES6 build system](https://legacy.fullcalendar.io/v5/initialize-es6.md):

```js
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 ],
  initialView: 'dayGridMonth',
  selectable: true
});
...
```

Alternatively, you can use [a global bundle](https://legacy.fullcalendar.io/v5/initialize-globals.md):

```html
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  selectable: true
});
...
</script>
```