# selectable

> FullCalendar v4 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v4/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/v4/date-clicking-selecting-demo' class='more-link'>See a demo</a>

The [select](https://legacy.fullcalendar.io/v4/select-callback.md) and [unselect](https://legacy.fullcalendar.io/v4/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/v4/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/v4/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 ],
  defaultView: 'dayGridMonth',
  selectable: true
});
...
```

Alternatively, you can use [script tags and browser globals](https://legacy.fullcalendar.io/v4/initialize-globals.md):

```html
<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>
```