DayPilot.Calendar.makeDraggable

The makeDraggable() method activates an external item so it can be dragged to the Calendar as a new event. It supports dragging on touch devices as well.

This method is static. Call it using the full DayPilot.Calendar.makeDraggable() prefix, not on a DayPilot.Calendar instance.

Declaration

DayPilot.Calendar.makeDraggable(options);

Parameters

• options.element (DOM element) - DOM node to activate for external drag and drop

• options.data (object) - event data; available since 2021.3.5096

• options.remove (DOM element) - DOM node removed on drop; if not specified, options.element is used

• options.keepElement (boolean) - set to true if the original element should not be removed from the DOM on drop

• options.externalCssClass (string) - CSS class applied to the moving shadow when it is outside of the Calendar

• options.externalCursor (string) - cursor used during external drag and drop (CSS format); available since 2020.2.4381

• options.externalHtml (string) - HTML added to the moving shadow when it is outside of the Calendar

• options.onDragStart - event handler fired on drag start; receives args.options and args.preventDefault(); optional; available since 2024.4.6293

• options.onDrop - event handler fired on drop; receives args.options; optional; available since 2024.4.6293

The options.data object can define the following properties:

• id (string) - event ID

• text (string) - event text

• duration (number | DayPilot.Duration) - event duration; a numeric value specifies the duration in seconds

Any additional properties of the options.data object are copied to the Calendar event data object on drop.

Notes

If options.remove is not specified, options.element is used and removed after a successful drop unless options.keepElement is set to true.

Use externalCssClass, externalHtml, and externalCursor to customize the moving shadow while the dragged item is outside of the Calendar.

Example

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

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

const item = {
  element: e,
  data: {
    id: e.dataset.id,
    text: e.innerText,
    duration: e.dataset.duration
  }
};

DayPilot.Calendar.makeDraggable(item);
</script>

See Also

External Drag and Drop [doc.daypilot.org]

DayPilot.Calendar Class