This version is a pre-release. Read the release notes

Third-Party Dragging Libraries

It’s possible to leverage a third-party library to do your external element drag-n-drop instead of using FullCalendar. You might want to do this if you prefer the visual effects of another library, need “sorting” functionality, or need the ability to drag-n-drop between multiple containers, functionality that FullCalendar does not have.

FullCalendar offers a way to do this via the ThirdPartyDraggable class. This class will work with any third-party drag-n-drop library, without needing any sort of specific adapter. The following example demonstrates Dragula:

import { ThirdPartyDraggable } from 'fullcalendar';
import dragula from 'dragula';

var containerEl = document.getElementById('external-events-list');

var drake = dragula({
  containers: [ containerEl ],
  copy: true

new ThirdPartyDraggable(containerEl, {
  itemSelector: '.my-item',
  mirrorSelector: '.gu-mirror', // the dragging element that dragula renders
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText

The API for ThirdPartyDraggable is very similar to Draggable. Please check that out first.

The ThirdPartyDraggable constructor accepts the following options:


An object or a function that returns an object.


A CSS selector that matches draggable elements within a container element.


Your third party library undoubtedly renders a placeholder element that moves as your mouse drags. It is useful to disable this placeholder element for when the element is dragged over a time slot and FullCalendar renders its own placeholder element. Specify a CSS selector, relative to the <body>.