TypeScript Calendar and Scheduler Tutorials

How to configure the Angular calendar component to use 100% height and fill the available space.

How to detect mobile device rotation and switch the Angular Calendar view accordingly.

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.

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.

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

How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.

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.

Angular 21 project that displays a task hierarchy using a Gantt Chart UI component. The frontend Angular application is connected to a PHP JSON backend with SQLite or MySQL storage.

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.

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

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.

How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).

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

Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.

This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.

This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.