Angular Calendar and Scheduler Tutorials

This page lists Angular tutorials that will show you how to create different types of scheduling web applications using Angular calendar and scheduler components.

Most of the tutorials show the DayPilot Angular Scheduler component - it offers many advanced features, such as row filtering, event filtering, undo/redo, event copy and paste, dynamic data loading, zoom.

For an introduction to using the Angular scheduler with a REST API please see the following tutorials:

• Angular Scheduler + PHP/MySQL

• Angular Scheduler + Spring Boot (Java)

There are also tutorials that focus on real-world scenarios and include a UI for a more complex web calendar applications - including point-of-sale applications like restaurant table reservation and hotel room booking; internal systems like work order scheduling tool and timesheet.

All tutorials include a project with TypeScript source code for download.

If you are looking for a specific Angular version, please see the following lists:

• Angular 22

• Angular 21

• Angular 20

Older Angular versions: Angular 19, Angular 18, Angular 17, Angular 16, Angular 15, Angular 14, Angular 13, Angular 12, Angular 11.

The Angular Calendar component has an open-source version. See the Angular Calendar: Day/Week/Month Views (Open-Source) for a project that shows how to integrate daily, weekly, and monthly calendar views.