editable

Determines whether the events on the calendar can be modified.

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 and eventDurationEditable instead.

This option can be overridden on a per-event basis with the Event Object editable property. However, Background Events can not be dragged or resized.

Required Plugin#

This functionality requires the interaction plugin. If you are using a build system, you can do something like this:

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

Alternatively, if you are using a global bundle, you can do something like this:

<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, {
  // no plugin configuration required!
  editable: true
})
...
</script>

View a demo with a calendar’s events being editable.