DayPilot.Scheduler.makeDraggable

The makeDraggable() method activates an external element so it can be dragged to the JavaScript Scheduler component as an event. It supports dragging on touch devices as well.

This method is static. Call it using the full prefix, not on a DayPilot.Scheduler class instance.

Declaration

DayPilot.Scheduler.makeDraggable(options)

Parameters

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

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

• options.data - the source data object; available since 2021.2.4941. In prior versions, add id, text, and duration directly to options

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

• options.remove (DOM element) - the element to remove 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; optional

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

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

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

• options.tapAndHoldTimeout (number) - milliseconds to wait before moving is activated; optional; available since 2025.4.6741

The source data object (options.data) requires the following properties:

• id (string | number) - event ID

• text (string) - event text

• duration (number | DayPilot.Duration) - event duration; you can also supply start and end instead of duration

Notes

All other properties of options.data are copied to the target object and are available in DayPilot.Scheduler.onEventMove as properties of args.e.data.

See External Drag and Drop for the full workflow.

Example

Assuming the page contains <div id="item" data-id="1" data-duration="60">Draggable item</div>:

const element = document.getElementById("item");

DayPilot.Scheduler.makeDraggable({
  element,
  data: {
    id: element.getAttribute("data-id"),
    text: element.innerText,
    duration: element.getAttribute("data-duration")
  }
});

See Also

External Drag and Drop [doc.daypilot.org]

DayPilot.Scheduler.makeDraggableAsRow()

DayPilot.Scheduler.registerDropTarget()

DayPilot.Scheduler Class