Angular Scheduler Tutorials

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.

How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.

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.

Angular application with real-time filtering of Scheduler component rows (by name, by number of events).

How to find, focus and highlight a Scheduler row that matches the search criteria.

Angular tutorial that shows how to implement undo/redo functionality for the DayPilot Lite Angular Scheduler UI component.

Angular tutorial that shows how to link related events in the Angular Scheduler UI component.

This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.

Angular 21 application that displays the Scheduler in a full-page layout with a collapsible sidebar, date navigation, and switchable 100% height modes.

How to calculate resource utilization for time slots and show a bar chart in a fixed row displayed at the top of the Angular Scheduler component.

Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.

Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.

How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.

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.

An Angular application that shows how to use DayPilot Scheduler with a PHP/MySQL backend.

How to add action controls to the Angular Scheduler row headers: clickable icons, hyperlinks, and context menu buttons.

Angular 18 project that shows how to display events split into phases in the Scheduler component.

Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.