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:
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:
Older Angular versions: 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.
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 20 calendar/scheduler application.
May 30, 2025
How to export the Scheduler view to Angular, including frozen time headers (X axis) and row headers (Y axis). Add a custom row with utilization summary to the frozen headers.
Mar 5, 2025
Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.
Oct 15, 2024
An Angular application that shows how to use DayPilot Scheduler with a PHP/MySQL backend.
Oct 3, 2024
How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
Sep 10, 2024
How to detect mobile device rotation and switch the Angular Calendar view accordingly.
Aug 16, 2024
How to add action controls to the Angular Scheduler row headers: clickable icons, hyperlinks, and context menu buttons.
Jul 31, 2024
Angular 18 project that shows how to display events split into phases in the Scheduler component.
Jul 16, 2024
Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.
Jul 12, 2024
Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Jul 7, 2024
Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.
Jul 1, 2024
Angular application with Scheduler component that can filter events in real time (by text, category, duration).
Jun 30, 2024
Angular web application that lets you assign and schedule work orders using drag and drop. Built using DayPilot Scheduler Angular component. Includes a REST backend implemented in PHP/MySQL
Jun 23, 2024
How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.
Jun 18, 2024
Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
Jun 18, 2024
An Angular 18 project template that you can use as a starting point for your own implementation of an interactive timesheet. Learn how to adjust the timesheet appearance and add visual elements.
Jun 7, 2024
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
Jun 2, 2024
Angular project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).
Dec 19, 2023
Angular 16 application with real-time filtering of Scheduler component rows (by name, by number of events).
Oct 25, 2023
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
May 29, 2023
DayPilot
