DayPilot.Month.makeDraggable

The makeDraggable() method activates an external item so it can be dragged to the Month component as a new event.

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

Declaration

DayPilot.Month.makeDraggable(options);

Parameters

• options.element (HTMLElement) - DOM node to activate for external drag and drop; if options.remove is not specified, this node will be removed on drop

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

• options.remove (HTMLElement) - node to remove on drop; if not specified, options.element is used; available since 2026.1.6821

• 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 Month component; optional; available since 2026.1.6821

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

• options.externalHtml (string) - HTML added to the moving shadow when it is outside of the Month component; optional; available since 2026.1.6821

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

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

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 will be copied to the Month event data object on drop.

Notes

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

Example

Call the static method using the full DayPilot.Month.makeDraggable() prefix:

<div id="item" data-id="1" data-duration="1440">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.Month.makeDraggable(item);
</script>

See Also

DayPilot.Month Class