JavaScript Scheduler Tutorials

How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.

Links can be used to display relationships between tasks in the React Scheduler UI component. Learn about the most common use cases and configuration options.

How to enable keyboard navigation in the JavaScript Scheduler component. Use the keyboard to focus cells in the grid, select a time range and edit existing events.

How to configure the image export of the JavaScript Scheduler to include rich HTML content.

How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.

Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.

How to activate external items so they can be dragged to the React Scheduler component.

When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).

How to render custom React JSX component in the Scheduler grid cells.

How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 10) with SQL Server and Entity Framework.

How to group related events into a single event in the JavaScript Scheduler component and add expand [+] and collapse [-] icons that allow changing the event visibility.

Build a touch-friendly JavaScript Scheduler with DayPilot. Create, move and resize events, open an event menu, and edit dates and resources on phones, tablets and desktop browsers.

This tutorial explains how to create a visual ASP.NET Core application for scheduling shifts (multiple locations and employees). It uses a modern UI that lets you manage shifts using drag and drop.

How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.

How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.

The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.

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.

How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).

What things to look at when you are not happy with the React Scheduler component performance.

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.