DayPilotBuild the booking workflow around the JavaScript Scheduler: create and edit events, select several items, show details, and offer actions where users need them. Callbacks connect these interactions to your application data and backend.
Create, edit, and delete bookings
Selecting an empty range supplies the dates and resource for a new booking. Your handler can open a form, collect the remaining fields, and add the saved event. Clicking an existing event can open the same editor with its current values.
Event editing supports application-defined forms, while inline editing is useful when users only need to change a label. Deletion can be exposed through an event action or menu, with confirmation and persistence handled by your application.
Keep the editor appropriate to the task. A room booking may need a title and attendee count; a dispatch job may need a customer, location, status, and required skills. The Scheduler does not impose a database schema on these fields.
Build a scheduler with editing and a backend using the HTML5 tutorial.
Select work and apply a batch action
Event selection identifies the items the user wants to act on. Multiple selection and rectangle selection can support batch reassignment, status changes, or moving several related events together.
The selected events are available to your code. Use that collection to show a batch toolbar or submit a single application command. The application decides which fields may change and how failures are reported.
Copy-and-paste patterns use the same event data and callbacks. A copied booking needs a new ID; your code determines whether it keeps the original resource, shifts its dates, or copies only selected fields.
Put details and actions beside the event
An event context menu can offer Edit, Duplicate, Reassign, or Delete for the event the user selected. Active areas provide visible buttons or icons inside an event when an action should be available without opening a menu.
Use an event bubble to show secondary details on hover, such as a customer, booking status, or full description. Keep essential information in the event itself so it remains available on touch devices and when no bubble is open.
Your application can disable or omit actions according to the event's state. Approved work might remain visible while moving and resizing are locked.
Move, resize, and assign work
Moving changes an event's date or resource; resizing changes its duration. Both provide callbacks with the proposed values. Use validation before applying a change and save the accepted result through your API.
For work that has not yet been placed on the timeline, external drag and drop connects an application list or the Queue component to the Scheduler. A dispatcher can assign a task by dropping it onto a resource and time.
Try the Queue-to-Scheduler workflow.
Show the result of an action
The Scheduler's message bar can report that a change was saved, while an editor or validation message can explain why it failed. Your backend remains responsible for accepting the command, enforcing shared scheduling rules, and returning the saved data.
For keyboard navigation, touch controls, filtering, and labels that remain visible while scrolling, see the user-experience guide.