Dragging Between Calendars
It’s possible to initialize two or more separate Calendars, and then allow the user to drag events between the calendars!
All calendars involved need to have their editable setting set to true and have the interaction plugin loaded. The, calendars you want to be able to receive events should have their droppable setting set to true. Barebones code example:
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
document.addEventListener('DOMContentLoaded', function() {
let srcCalendarEl = document.getElementById('source-calendar');
let destCalendarEl = document.getElementById('destination-calendar');
let srcCalendar = new Calendar(srcCalendarEl, {
plugins: [ interactionPlugin ],
editable: true,
events: [
// event data here
]
});
let destCalendar = new Calendar(destCalendarEl, {
plugins: [ interactionPlugin ],
editable: true,
droppable: true // will let it receive events!
});
srcCalendar.render();
destCalendar.render();
});
When dropped, the eventLeave, drop, and eventReceive callbacks will fire.