DayPilot.Calendar.registerDropTarget

The registerDropTarget() method allows activating an external element as a drop target for external items made draggable using DayPilot.Calendar.makeDraggable(). This will let you drag events from the external list either to the Calendar component or to this drop target.

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

Available since 2021.3.5096.

Declaration

DayPilot.Calendar.registerDropTarget(options);

Parameters

• options.element (DOM element) - the element to be activated for drag and drop
• options.onDragLeave - event handler that will be fired when the source event is moved outside of the target; optional
• options.onDragOver - event handler that will be fired continuously when the source event is being moved over the target; optional
• options.onDrop - event handler that will be fired on drop; optional

The event handlers will receive an args parameter with the following properties:

• args.data - the source object

See Also

• DayPilot.Calendar.makeDraggable()

Example

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