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

Tutorial: ASP.NET Core Hotel Room Booking App

Learn how to build an ASP.NET Core-based hotel room booking management application featuring a drag-and-drop interface, filter functionality, integration with SQL Server and Entity Framework, all visualized using a JavaScript Scheduler component.

asp.net-core sql-server c#hotel javascript entity-framework sql-server scheduler frozen filtering row-header-columns dotnet10 reservation app

Read tutorial

A head start on your next project

Application workflows and a smaller starting point.

All application examples

Application exampleReact · Node.js

React: Activity Planning System (Node, Express, PostgreSQL)

Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.

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 exampleReact · PHP

React Shift Scheduling Application (PHP/MySQL Backend)

React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP, with SQLite default storage and optional MySQL.

Read tutorial

Latest tutorials & updates

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

Angular Gantt Chart: Full Screen Layout
How to integrate the Angular Gantt chart component into a page with a full-screen layout. Get rid of duplicate vertical scrollbars and fix the time header.
AngularSep 25, 2026

Live demo
Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions
How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.
ReactSep 24, 2026

Live demo
Angular Calendar: Full Screen Layout
How to configure the Angular calendar component to use 100% height and fill the available space.
AngularSep 24, 2026

Live demo
React Scheduler: PDF Export/Printing
How to export the current React Scheduler view to a multi-page PDF document with a specified number of rows per page.
ReactSep 22, 2026

Live demo