How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
Feb 16, 2023
Our selection of tutorials is geared towards enhancing the JavaScript Calendar and Scheduler components with dynamic drag-and-drop functionalities. These guides cover a range of topics: from configuring Scheduler event boxes to accept items from an external list, to enabling drag-and-drop column reordering and resizing.
You'll also learn how to extend your calendar functionality to allow all-day event dragging, create daily task queues, and even accept files dragged from the desktop. Whether you're interested in swapping events, limiting time range selections, or dragging items from events, we have a tutorial for you.
How to activate external items so they can be dragged to the React Scheduler component.
Oct 10, 2022
Learn how to enable drag and drop column reordering and resizing for the JavaScript resource calendar component.
Jul 21, 2022
How to use the native HTML5 drag and drop API to extend the calendar functionality and allow dragging an all-day event to a selected calendar cell.
Oct 29, 2021
How to create a queue of tasks scheduled for a specific day. The exact time of day and resource can be assigned using drag and drop in the next step.
Oct 26, 2021
How to drag items either to the JavaScript Calendar component or to a custom element.
Sep 30, 2021
How to configure the JavaScript Scheduler component to accept files dragged from the desktop. The file will be converted to a Scheduler event on drop.
Jun 9, 2021
Copy multiple Scheduler events using copy & paste or using drag and drop.
Apr 13, 2021
How to configure the JavaScript Scheduler component to automatically move events at the target location during drag and drop.
Jan 19, 2021
How to implement event swapping using drag an drop in the JavaScript Scheduler component. Detect events at the target position and move the target event to the source position after drop. The Scheduler provides real-time feedback during dragging.
Nov 21, 2020
How to limit drag and drop time range selection to the specified number of cells.
Oct 29, 2020
How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).
Sep 17, 2020
The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.
Jun 1, 2020
How to limit the horizontal (date/time) position of an event and display the allowed range using event versions.
Dec 6, 2019
How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.
Jul 23, 2019
Articles 1-15 of 15