# 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](editable.md) setting set to `true` and have the `interaction` plugin loaded. The, calendars you want to be able to **receive** events should have their [droppable](droppable.md) setting set to `true`. Barebones code example:

```js
import { Calendar } from 'fullcalendar';
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](eventLeave.md), [drop](drop.md), and [eventReceive](eventReceive.md) callbacks will fire.

[See a live demo »](other-calendar-dragging-demo)