editable
Determines whether the events on the calendar can be modified.
Boolean, default: false
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 an ES6 build system, you can do something like this:
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
...
let calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin ],
editable: true
})
...
Alternatively, if you are using a global bundle, you can do something like this:
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
// no plugin configuration required!
editable: true
})
...
</script>
View a demo with a calendar’s events being editable.