DayPilot.Month.makeDraggable

The makeDraggable() method allows activating external items so they can be dragged to the Month componnet as events.

Declaration

DayPilot.Month.makeDraggable(options);

Parameters

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

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

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

• 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; optional (since 2026.1.6821)

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

• options.externalHtml (string) - HTML that will be added to the moving shadow when it is outside of the Calendar; optional (since 2026.1.6821)

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

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

The options.data object define have the following properties:

• id (string) - event ID

• text (string) - event text

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

Any additional properties of the options.data object will be copied to the Month event data object on drop.

Example

Note: This method is static. It has to be executed using the full prefix (not on a DayPilot.Month class instance):

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