The JavaScript Scheduler supports drag-and-drop creation, moving, resizing and assignment directly on its resource timeline. The interaction extends to selected groups of events, work from external lists and movement between schedules, with feedback and validation while the user drags.

Create, move and resize events

Users select an empty time range to create a booking, move an event to another date or resource, and drag either edge to change its duration. Moving and resizing update the displayed event by default; creation supplies the selected dates and resource to your event handler.

JavaScript Scheduler Moving an Event to an Available Resource
The native drag shadow previews a new resource and time, with configurable feedback beside it.

The drag shadow and date indicators preview the proposed position. Interactions can be enabled for the whole board or restricted for individual events, so fixed or approved bookings can remain visible without being movable.

In Pro, users can create dependency links by dragging between events. When a linked event moves, shadow copies of its connections preview the relationship at the proposed position. Links show how work connects; your application decides whether related dates should change.

Show feedback and apply scheduling rules

In DayPilot Pro, the proposed position is available throughout a drag. Drag validation can reject a target, adjust the dates and explain a restriction beside the shadow. Shifts, resource availability and capacity can therefore affect the interaction before the user drops the event.

JavaScript Scheduler Drag Validation for Unavailable Time
Unavailable cells and custom validation can explain why a proposed destination is refused.

Real-time checks are synchronous; asynchronous server validation can run on drop before a change is accepted. The callbacks connect these interactions to your application rules and persistence. Business-duration moving can also preserve working time when an event crosses closed hours or moves between resources with different working calendars.

Move or resize several events together

Multiple-event moving shifts selected bookings together. They can keep their original resource rows or move across rows when resource movement is enabled. Multiple-event resizing applies a duration change to the selected set.

JavaScript Scheduler Moving Multiple Events Together

Ctrl+drag copying can be added through the same event handlers. Selection and copying also support application commands such as batch reassignment or a status change.

Bring external work onto the timeline

External drag and drop connects items in an HTML list to the Scheduler. The separate Queue component provides a waiting-work list that supports dragging tasks onto the board and moving scheduled work back out.

A frozen unassigned row keeps dated work on the same timeline until it is allocated to a resource. Events can also be dragged between two Scheduler instances, with application handlers coordinating the resulting data changes.

Try the Queue-to-Scheduler demo.

Continue beyond the visible grid

Automatic scrolling brings additional dates and rows into view when a drag reaches the viewport edge. It works horizontally and vertically during moving, resizing, time-range selection and link creation.

Touch interaction uses press-and-hold moving and range selection, with visible handles available for resizing. The mobile overview covers gestures and touch controls.