# editable

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

Determines whether the events on the calendar can be modified.

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

This determines if the events can be *dragged* and *resized*. Enables/disables both at the same time. If you don't want both, use the more specific [eventStartEditable](https://legacy.fullcalendar.io/v4/eventStartEditable.md) and [eventDurationEditable](https://legacy.fullcalendar.io/v4/eventDurationEditable.md) instead.

This option can be overridden on a per-event basis with the [Event Object](https://legacy.fullcalendar.io/v4/event-object.md) `editable` property. However, [Background Events](https://legacy.fullcalendar.io/v4/background-events.md) can not be *dragged* or *resized*.

## Required Plugin

This functionality requires the `interaction` plugin. If you are using [an ES6 build system](https://legacy.fullcalendar.io/v4/initialize-es6.md), you can do something like this:

```js
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin ],
  editable: true
})
...
```

Alternatively, if you are using [script tags and browser globals](https://legacy.fullcalendar.io/v4/initialize-globals.md), you can do something like this:

```html
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/core/interaction/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction' ],
  editable: true
})
...
</script>
```

[View a demo](https://legacy.fullcalendar.io/v4/event-dragging-resizing-demo) with a calendar's events being editable.