# Dragging Between Calendars

> FullCalendar v5 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v5/other-calendar-dragging
>
> Latest version (v7): https://fullcalendar.io/docs/other-calendar-dragging.md

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](https://legacy.fullcalendar.io/v5/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](https://legacy.fullcalendar.io/v5/droppable.md) setting set to `true`. Barebones code example:

```js
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](https://legacy.fullcalendar.io/v5/eventLeave.md), [drop](https://legacy.fullcalendar.io/v5/drop.md), and [eventReceive](https://legacy.fullcalendar.io/v5/eventReceive.md) callbacks will fire.

[See a live demo »](https://legacy.fullcalendar.io/v5/other-calendar-dragging-demo)