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 filteringevent filteringundo/redoevent copy and pastedynamic data loadingzoom.

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 11, Angular 10, Angular 9, Angular 8, Angular 7Angular 6Angular 5Angular 4Angular 2.

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.

Angular Scheduler: Resource Management
Angular Scheduler: Resource Management
This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Angular 14 Timesheet Quick Start Project
Angular 14 Timesheet Quick Start Project
An Angular 14 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.
Angular 14 Scheduler Quick Start Project
Angular 14 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 14 calendar/scheduler application.
Angular Resource Calendar (Open-Source)
Angular Resource Calendar (Open-Source)
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.
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Angular Scheduler: Rendering Angular Components Inside Events
Angular Scheduler: Rendering Angular Components Inside Events
How to add custom components to events displayed in the Angular Scheduler.
Angular Scheduler: Read-Only and Edit Mode Switching
Angular Scheduler: Read-Only and Edit Mode Switching
Angular 13 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
Angular Scheduler: Dynamic Tooltip
Angular Scheduler: Dynamic Tooltip
The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.
Angular Scheduler: Event Filtering
Angular Scheduler: Event Filtering
Angular application with Scheduler component that can filter events in real time (by text, category, length).
Angular Calendar: Date Switching
Angular Calendar: Date Switching
How to integrate Angular 13 event calendar component with a date picker and navigation buttons for changing the visible week.
Angular Calendar: Day/Week/Month Views (Open-Source)
Angular Calendar: Day/Week/Month Views (Open-Source)
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.
Angular Scheduler: How to Add Components to the Upper-Left Corner
Angular Scheduler: How to Add Components to the Upper-Left Corner
How to add a custom Angular component to the upper-left corner of the Scheduler.
Angular Calendar: Displaying Custom Set of Days
Angular Calendar: Displaying Custom Set of Days
Web application with Angular calendar component configured to display a custom set of days as columns.
Angular Scheduler: Undo/Redo
Angular Scheduler: Undo/Redo
Angular tutorial that shows how to implement undo/redo functionality for the Angular Scheduler UI component.
Angular Scheduler: Online Configurator
Angular Scheduler: Online Configurator
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
Angular Calendar: Detect Orientation Change (Landscape/Portrait)
Angular Calendar: Detect Orientation Change (Landscape/Portrait)
How to detect mobile device rotation and switch the Angular Calendar view accordingly.
Angular Gantt Chart: Full Screen Layout
Angular Gantt Chart: Full Screen Layout
How to integrate the Angular Gantt chart component into a page with a full-screen layout. Get rid of duplicate vertical scrollbars and fix the time header.
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
Articles 1-20 of 79 Next