DayPilot.Calendar.makeDraggable

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 [doc.daypilot.org].

Declaration

DayPilot.Calendar.makeDraggable(options);

Parameters

• options.element (object) - the element to be removed on drop

• options.data - the event data (since 2021.3.5096)

• options.remove (DOM element) - the element to be removed on drop; if not specified, options.element will be used

• 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)

• options.onDragStart - event handler that will be fired on drag start (args.options, args.preventDefault()); optional; available since 2024.4.6293

• options.onDrop - event handler that will be fired on drop (args.options); optional; available since 2024.4.6293

The options.data 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 options.data 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.

Example

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>

<script>
  var e = document.getElementById("item");

  var item = {
    element: e,
    id: e.dataset.id,
    text: e.innerText,
    duration: e.dataset.duration
  };
  DayPilot.Calendar.makeDraggable(item);
</script>