DayPilotDayPilot
Products
Support
DayPilot Code
JavaScript
Angular
React
Vue
ASP.NET
ASP.NET Core
PHP
Spring Boot
Open-Source

Hands-On Scheduler Customization: Drag-and-Drop Tutorials

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.

JavaScript Scheduler: Daily Task Queue
JavaScript Scheduler: Daily Task Queue
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.
javascript scheduler queue drag-drop
Jul 3, 2024
JavaScript Scheduler: Select a Time Range over Multiple Rows
JavaScript Scheduler: Select a Time Range over Multiple Rows
The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.
javascript scheduler drag-drop
Aug 14, 2023
JavaScript Scheduler: Events as Drag and Drop Target
JavaScript Scheduler: Events as Drag and Drop Target
How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
javascript scheduler drag-drop html5
Feb 16, 2023
React Scheduler: External Drag and Drop
React Scheduler: External Drag and Drop
How to activate external items so they can be dragged to the React Scheduler component.
react react18 scheduler jsx drag-drop javascript
Oct 10, 2022
JavaScript Calendar: Reorder and Resize Columns using Drag and Drop
JavaScript Calendar: Reorder and Resize Columns using Drag and Drop
Learn how to enable drag and drop column reordering and resizing for the JavaScript resource calendar component.
javascript calendar drag-drop resource-calendar
Jul 21, 2022
JavaScript Calendar: Drag All-Day Events to a Specific Time of Day
JavaScript Calendar: Drag All-Day Events to a Specific Time of Day
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.
javascript calendar drag-drop
Oct 29, 2021
JavaScript Calendar: Custom Drop Target for External Items
JavaScript Calendar: Custom Drop Target for External Items
How to drag items either to the JavaScript Calendar component or to a custom element.
javascript calendar drag-drop
Sep 30, 2021
JavaScript Scheduler: Dragging Files and Other Items from Desktop
JavaScript Scheduler: Dragging Files and Other Items from Desktop
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.
javascript scheduler html5 drag-drop
Jun 9, 2021
JavaScript Scheduler: Copy Multiple Events
JavaScript Scheduler: Copy Multiple Events
Copy multiple Scheduler events using copy & paste or using drag and drop.
javascript scheduler copy paste drag-drop
Apr 13, 2021
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler to automatically shift existing events forward when a new event is dragged and dropped, to avoid overlaps.
javascript scheduler drag-drop
Jan 19, 2021
JavaScript Scheduler: Swapping Events (Drag and Drop)
JavaScript Scheduler: Swapping Events (Drag and Drop)
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.
javascript scheduler drag-drop
Nov 21, 2020
JavaScript Scheduler: Limit Time Range Selection (Min/Max)
JavaScript Scheduler: Limit Time Range Selection (Min/Max)
How to limit drag and drop time range selection to the specified number of cells.
javascript scheduler drag-drop
Oct 29, 2020
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).
javascript scheduler drag-drop
Sep 17, 2020
JavaScript Scheduler: Limited Drag and Drop Range
JavaScript Scheduler: Limited Drag and Drop Range
How to limit the horizontal (date/time) position of an event and display the allowed range using event versions.
javascript scheduler drag-drop
Dec 6, 2019
JavaScript Scheduler: Dragging Items from Events
JavaScript Scheduler: Dragging Items from Events
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.
javascript scheduler drag-drop
Jul 23, 2019
Articles 1-15 of 15

Products

Resources

Tools

About Us

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.