Scheduling tutorials & source code
Tutorials and downloadable examples using DayPilot calendar and scheduling components. Start with a component, connect your backend, or explore application workflows.
Find a starting pointFeatured tutorial
How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.
Application workflows and a smaller starting point.
Application exampleJavaScript · PHP
HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.
Quick startAngular
A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 22 calendar/scheduler application.
Application exampleJavaScript · ASP.NET Core
How to implement a field service scheduling application in ASP.NET Core, with visual representation of travel time, route planning, and real-time constraint enforcement.
Step-by-step guides to scheduling features, UI customization, and backend integration.
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.
Open-source React Scheduler with a readable year-view timeline, theme switching, editable events, and custom event rendering.
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.
Find the view that fits your application.
Control how users work with schedules.
Adapt the display and handle larger schedules.
DayPilot
