I have a list of item that is listed outside of calendar and would like to drop it to the calendar date to create a task.
Is this possible?
Hello @ricky_ogtip,
By default, scheduler supports outer drag only with Suite 5.x components, you can read about this functionality by the following the link:
https://docs.dhtmlx.com/scheduler/dhtmlx_components_integration.html#draggingfromexternalcomponents
Sample:
https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html
But you can implement similar logic for different components, with the basic js events as: drop, dragleave, dragenter, dragover, drag and others.
In order to do what you want, you should:
1.) Detect a drop of your draggable element on the scheduler
2.) Detect the section in which you drop it(in case of the timeline view)
3.) Call the addEvent method
4.) Rerender the scheduler with the render() method
The code may look like follows:
document.addEventListener("drop", function( event ) {
// Check, if the target is dropped on the timeline cell
if ( event.target.parentElement.classList.contains("dhx_matrix_cell")) {
Get the section where target is dropped
var sectionID = event.target.closest(".dhx_matrix_line").dataset.sectionId;
// Add event to the section we found above
scheduler.addEvent({
start_date: "16-06-2013 09:00",
end_date: "16-06-2025 12:00",
text: "Meeting",
section_id: sectionID
});
// Rerender the scheduler with added event
scheduler.render()
}
}, true);
It may look like the following demo(drag the “Draggable div” to the timeline section and drop it there to create an event):
http://snippet.dhtmlx.com/5/c03c49d08
This example works for the timeline view, but you can use similar logic for other views.