DayPilot.Calendar.registerDropTarget

The registerDropTarget() method activates an external element as a drop target for items made draggable using DayPilot.Calendar.makeDraggable().

Declaration

DayPilot.Calendar.registerDropTarget(options);

Parameters

• options.element (DOM element) - target element that accepts external drops

• options.onDragLeave (function) - optional handler fired when the dragged item leaves the target

• options.onDragOver (function) - optional handler fired continuously while the dragged item is over the target

• options.onDrop (function) - optional handler fired when the item is dropped on the target

Notes

This method lets users drag events from an external list either to the Calendar component or to the registered drop target.

This is a static method. Call it on DayPilot.Calendar, not on a DayPilot.Calendar instance.

The event handlers receive an args object with an args.data property that contains the source object.

Available since 2021.3.5096.

Example

const drop = document.querySelector("#drop");

DayPilot.Calendar.registerDropTarget({
  element: drop,
  onDrop: (args) => {
    drop.innerText += ` ${args.data.text}`;
    drop.classList.remove("active");
  },
  onDragOver: () => {
    drop.classList.add("active");
  },
  onDragLeave: () => {
    drop.classList.remove("active");
  }
});

See Also

DayPilot.Calendar.makeDraggable()

DayPilot.Calendar Class