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
  • (string) - event ID
  • options.text (string) - event text
  • options.duration (integer) - event duration in seconds
  • 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)


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