This page lists Angular tutorials that will guide you through creating different types of scheduling web applications. Angular is a framework for creating SPA (single page applications) using TypeScript language.
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 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 8, Angular 7, Angular 6, Angular 5, Angular 4, Angular 2.
We also have a couple of tutorials for AngularJS 1.x.
Angular hotel room reservation application. The user interface supports managing rooms (create, edit, delete, change status) and reservations (create, edit, move, delete, change status). Includes a PHP/MySQL backend with token-based authentication.
Nov 27, 2020
Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Nov 26, 2020
Angular 11 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Nov 22, 2020
Angular 11 project that shows how to display events split into phases in the Scheduler component.
Nov 22, 2020
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.
Nov 22, 2020
How to add custom components to events displayed in the Angular Scheduler.
Oct 21, 2020
How to integrate Angular 10 event calendar component with a date picker and navigation buttons for changing the visible week.
Oct 14, 2020
Angular 10 application that shows how to switch the Scheduler (which is in "edit" mode by default) to read-only mode.
Aug 31, 2020
A quick start project that shows how to use the Angular 10 Timesheet component.
Aug 6, 2020
The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.
Aug 5, 2020
Angular project that displays a hierarchy of tasks using a Gantt Chart UI component. The frontend Angular application is connected to a JSON backend implemented in PHP with MySQL database.
Aug 3, 2020
Angular application with Scheduler component that can filter events in real time (by text, category, length).
Jul 25, 2020
Web application with Angular calendar component configured to display a custom set of days as columns.
Jul 25, 2020
Angular project that displays a Scheduler component with dynamic event data loading enabled. Event data is loaded on demand during scrolling to improve scalability.
Jul 25, 2020
Angular 10 project with weekly event calendar component. Download the project source code and use it as a starting point of your own application.
Jul 20, 2020
Angular 10 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
Jul 20, 2020
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.
Jul 19, 2020
How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.
Jul 11, 2020
Angular tutorial that shows how to implement undo/redo for Angular Scheduler UI component.
Jul 7, 2020
How to add a visual Scheduler component to your Angular 10 application. The Scheduler will let you plan and manage reservations, meetings, work orders and other events.
Jul 2, 2020
