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.

JavaScript Scheduler: How to Export HTML to Image
How to configure the image export of the JavaScript Scheduler to include rich HTML content.
JavaScriptNov 1, 2026

Live demo
Angular Scheduler: Freeze Headers during Export to Excel (XLSX)
How to export the Scheduler view to Angular, including frozen time headers (X axis) and row headers (Y axis). Add a custom row with utilization summary to the frozen headers.
AngularOct 28, 2026

Live demo
JavaScript Scheduler: Resource Utilization Chart for Rows
How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.
JavaScriptOct 28, 2026

Live demo
JavaScript Scheduler: Find Next Free Slot
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
JavaScriptOct 26, 2026

GitHub Live demo