Overview
Use the
DayPilot.Calendar.registerDropTarget()
method to create a custom drop target.This method lets you extend the drag and drop functionality for the external items.
The native HTML5 drag and drop API and
DayPilot.Calendar.makeDraggable()
can’t be used at the same time.
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
How to make external items draggable to the Calendar component
The JavaScript Calendar component supports external drag and drop. It lets you drag custom items to the calendar where they will be converted to events.
You can use DayPilot.Calendar.makeDraggable() method to mark items as draggable. The method accepts an object that has to define the following properties:
element
(this is the source element that will be made draggable)data
(item data that will be used to create the event; it has to specifyid
,text
, andduration
properties)
This example activates children of the #queue
element marked with .queue-item
CSS class:
HTML
<div id="queue">
<div data-id="1" class="queue-item">Item 1</div>
<div data-id="2" class="queue-item">Item 2</div>
<div data-id="3" class="queue-item">Item 3</div>
</div>
JavaScript
const app = {
elements: {
queue: document.querySelector("#queue"),
// ...
},
activateExternalItems() {
const items = this.elements.queue.querySelectorAll(".queue-item");
for (let i = 0; i < items.length; i++) {
const e = items[i];
const duration = DayPilot.Duration.ofMinutes(e.getAttribute("data-duration") || 60);
const item = {
element: e,
data: {
id: e.getAttribute("data-id"),
text: e.innerText,
duration: duration,
}
};
DayPilot.Calendar.makeDraggable(item);
}
},
// ...
};
How to activate a custom drop target
You can use the DayPilot.Calendar.registerDropTarget() method to activate an element as a drop target. This will let you drag the external items to this element.
The method lets you define events handlers:
onDrop
: fired when the item is dropped on the target elementonDragOver
: fired continuously when the the is being dragged over the target elementonDragLeave
: fired when the item is moved outside of the target element
The drop target respects the keepElement
option of the external item. By default, the source element will be removed from DOM on drop.
The following example activates the #drop
element. The #drop
element will be highlighted using "active" CSS class when an external item is being dragged over the element.
On drop, the external item text will be added to the #drop
element.
HTML
<div id="drop"></div>
JavaScript
const app = {
elements: {
// ...
drop: document.querySelector("#drop")
},
activateDropTarget() {
const drop = this.elements.drop;
DayPilot.Calendar.registerDropTarget({
element: drop,
onDrop: args => {
drop.innerText += " " + args.data.text;
drop.classList.remove("active");
},
onDragOver: args => {
drop.classList.add("active");
},
onDragLeave: args => {
drop.classList.remove("active");
}
});
}
// ...
};