logo

FullCalendar

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:

eventData

An object or a function that returns an object.

itemSelector

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

mirrorSelector

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>.