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 application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Jan 28, 2021
This tutorial shows how to use Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Jan 27, 2021
Angular application that displays the Scheduler in a full screen layout. The project includes a collapsible sidebar with a date picker.
Jan 27, 2021
Angular scheduling application that allows creating events from existing ones using copy and paste.
Jan 17, 2021
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.
Dec 20, 2020
Simple Angular application that shows how to use DayPilot Scheduler with PHP/MySQL backend.
Dec 20, 2020
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.
Dec 18, 2020
Angular project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).
Dec 16, 2020
Angular web application that lets you assign and schedule work orders using drag and drop. Built using DayPilot Scheduler Angular component. Includes a REST backend implemented in PHP/MySQL
Dec 16, 2020
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
Dec 15, 2020
How to add zoom feature to the Angular Scheduler component.
Dec 15, 2020
Angular application that displays a weekly timetable with custom time blocks.
Dec 15, 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.
Dec 10, 2020
Add an Angular Scheduler component to your application and use it to manage a schedule online. Add, move, edit, and delete reservations using drag and drop.
Dec 6, 2020
How to integrate Angular 11 event calendar component with a date picker and navigation buttons for changing the visible week.
Dec 5, 2020
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