Scheduling tutorials & source code

Build scheduling apps
with working examples.

Tutorials and downloadable examples using DayPilot calendar and scheduling components. Start with a component, connect your backend, or explore application workflows.

Find a starting point

What are you building?

Doctor appointmentsPatients and available slots Production schedulingMachines, jobs and dependencies Shift schedulingTeams, locations and shifts Hotel reservationsRooms, availability and bookings

Featured tutorial

Next.js Monthly Calendar (Open-Source)

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

Read tutorial Live demo

A head start on your next project

Application workflows and a smaller starting point.

All application examples

Application exampleAngular · ASP.NET Core

Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)

Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.

Read tutorial

Quick startAngular

Angular 22 Scheduler Quick Start Project

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.

Read tutorial

Application exampleJavaScript · PHP

PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)

A tutorial that shows how to create a PHP shift planning system - a web application that lets you manage shifts for multiple locations using a visual JavaScript scheduler component.

Read tutorial

Latest tutorials & updates

Step-by-step guides to scheduling features, UI customization, and backend integration.

Angular Scheduler: Event Links
Angular tutorial that shows how to link related events in the Angular Scheduler UI component.
AngularNov 3, 2026

Live demo
React: Milestone Scheduler
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
ReactNov 3, 2026

Live demo
Angular 22 Timesheet Quick Start Project
An Angular project template that you can use as a starting point for your own implementation of an interactive timesheet. Learn how to adjust the timesheet appearance and add visual elements.
AngularNov 3, 2026

Live demo
Angular Calendar: Event Filtering
Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.
AngularNov 3, 2026

Live demo