Dragging Between Calendars

Let the user drag events between two or more separate 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';
import interactionPlugin from 'fullcalendar/interaction';
import dayGridPlugin from 'fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  const srcCalendarEl = document.getElementById('source-calendar');
  const destCalendarEl = document.getElementById('destination-calendar');

  const srcCalendar = new Calendar(srcCalendarEl, {
    plugins: [ interactionPlugin, dayGridPlugin ],
    editable: true,
    events: [
      // event data here
    ]
  });

  const destCalendar = new Calendar(destCalendarEl, {
    plugins: [ interactionPlugin, dayGridPlugin ],
    editable: true,
    droppable: true // will let it receive events!
  });

  srcCalendar.render();
  destCalendar.render();
});

When dropped, the eventLeave, drop, and eventReceive handlers will fire.

See a live demo →