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 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
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
VueSep 20, 2026

GitHub Live demo
React Scheduler: Full Screen Layout
How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.
ReactSep 20, 2026

Live demo
Angular Calendar: Detect Orientation Change (Landscape/Portrait)
How to detect mobile device rotation and switch the Angular Calendar view accordingly.
AngularSep 18, 2026

Live demo