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




  • options.onDragStart (, args.preventDefault())
  • 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 Scheduler)
  • options.externalHtml (string) - HTML that will be added to the moving shadow (when it is outside of the Scheduler)


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

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

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

  var item = {
    element: e,
    id: e.getAttribute("data-id"),
    text: e.innerText,
    duration: e.getAttribute("data-duration")