The makeDraggable() method allows activating external items so they can be dragged to the Calendar as events. It supports dragging using touch devices as well. See more at external drag and drop [].




  • options.element (object) - the element to be removed on drop
  • - the event data (since 2021.3.5096)
  • options.keepElement (boolean) - set to true if the original element should not be removed from DOM on drop
  • options.externalCssClass (string) - CSS class that will be applied to the moving shadow (when it is outside of the Calendar)
  • options.externalCursor (string) - cursor that will be used during external drag and drop (CSS format); available since 2020.2.4381
  • options.externalHtml (string) - HTML that will be added to the moving shadow (when it is outside of the Calendar)

The object define have the following properties:

  • id (string) - event ID
  • text (string) - event text
  • duration (integer) - event duration in seconds

Any additional properties of the object will be copied to the Calendar event data object on drop.

Versions prior to 2021.3.5096 allow specifying id, text and duration directly under the options object. This approach is now deprecated.


Note: This method is "static", i.e. it has to be executed using the full prefix (not on a DayPilot.Calendar class instance):

<div id="item" data-id="1" data-duration="60">Draggable item</div>

  var e = document.getElementById("item");

  var item = {
    element: e,
    text: e.innerText,
    duration: e.dataset.duration