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

Vue Scheduler with Vertical Timeline

How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.

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 · Spring Boot

Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)

Tutorial with source code - a web application for scheduling dependent machine/production jobs, implemented in Spring Boot (Java).

Read tutorial

Latest tutorials & updates

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

React Scheduler: How to Manage Resources
Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.
React

Live demo
JavaScript Scheduler: How to Unschedule Events
When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).
JavaScript

Live demo
JavaScript Scheduler: Event Placement Strategies
An overview of Scheduler settings that let you control the vertical event position within rows. Includes custom sorting, forcing a specific line within a row, dedicated lines, keeping related events together using virtual containers.
JavaScript

Live demo
Vue Scheduler: Row Header Templates
How to customize the Vue Scheduler row header using Vue templates: add icons, badges, buttons and Vue components.
Vue

GitHub Live demo