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 Calendar: Full Screen Layout
How to configure the Angular calendar component to use 100% height and fill the available space.
AngularSep 23, 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
Vue Scheduler with Horizontal Timeline (Open-Source)
Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.
VueSep 22, 2026

GitHub Live demo
Angular Scheduler with Horizontal Timeline (Open-Source)
Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.
AngularSep 21, 2026

GitHub Live demo