External Drag and Drop

DayPilotCalendar supports drag&drop from an external source (from outside of the calendar control).

This feature is useful for implementing the following scenario:

• The calendar shows current time schedule.
• Separate list of events that are not yet scheduled. 
• The unscheduled events can be dragged to the calendar.

Drag Source

You should activate the element to be dragged using DayPilot.Calendar.makeDraggable() method on the client side:

<div id="external-event" data-id="1" data-duration="30">External event</div>

<script>

var e = document.getElementById("external-event");

var item = {
  element: e,
  id: e.getAttribute("data-id"),
  text: e.innerText,
  duration: e.getAttribute("data-duration")*60; // convert minutes to seconds
};
DayPilot.Calendar.makeDraggable(item);

</script>

After dropping the object the standard EventMove event is triggered (handling specified by EventMoveHandling). If you decide to handle it on the client side using JavaScript, you can detect the external source by checking the external variable (external is false when the event was dragged from another location inside the calendar):

See also

• DayPilot.Calendar.makeDraggable()

EventMoveJavaScript="if (external) { alert('External drag&drop detected.'); } 
dpc1.eventMoveCallBack(e, newStart, newEnd, oldColumn, newColumn);"

EventMoveJavaScript="if (external) { alert('external source detected'); } dpc.eventMoveCallBack(e, newStart, newEnd);"