Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
May 29, 2023
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 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.
This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.
May 14, 2023
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.
May 9, 2023
An Angular 16 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.
May 9, 2023
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 16 calendar/scheduler application.
May 7, 2023
Angular scheduling application that allows moving events using "cut and paste" and creating events from existing ones using "copy and paste" actions.
Feb 16, 2023
Learn how to insert custom components in Angular Scheduler row headers.
Dec 14, 2022
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
Dec 8, 2022
Angular 14 project that shows how to display events split into phases in the Scheduler component.
Nov 3, 2022
Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Oct 10, 2022
This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Sep 10, 2022
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Aug 16, 2022
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.
Jun 2, 2022
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Mar 28, 2022
How to add custom components to events displayed in the Angular Scheduler.
Mar 19, 2022
Angular 13 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.
Mar 3, 2022
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.
Feb 15, 2022
The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.
Jan 23, 2022
Angular application with Scheduler component that can filter events in real time (by text, category, length).
Jan 23, 2022
Articles 1-20 of 81
Next