External drag & drop

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

This feature is useful for implementing the following scenario:

• Calendar/scheduler showing the current time schedule.
• Separate list of events that are not yet scheduled. 
• The unscheduled events can be dragged into the calendar/scheduler.

Step 1: Drag the item from a list of unscheduled events.

Step 2: The object is detected as an event when you drag it over the calendar.

How to

You should activate the element to be dragged by adding the following attribute:

onmousedown='return DayPilotCalendar.dragStart(this.parentNode, 60*30, "123", this.innerHTML);'

It's better to add it to an inline element (<span>) rather than a block element (<div>, <li>) because block elements would become drag-sensitive in all the width (100%) and not just on the text

The dragStart parameters are as follows:

DayPilotCalendar.dragStart(elementToBeRemoved, durationInSeconds, 
valueToBePassedToMoveEvent, textToBePassedToMoveEvent);

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

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

See also

• Drag & drop from a TextBox or Grid (DayPilot Forums)
• Drag & drop with dynamic events (DayPilot Forums)
• Say we have drag & drop component ... (DayPilot Forums)