Angular Scheduling Tutorials

This page lists Angular tutorials that will guide you through creating different types of scheduling web applications.

Most of the tutorials use the DayPilot Angular Scheduler component - it offers many advanced features, such as row filteringundo/redoevent copy and pastedynamic data loading.

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:

We also have a couple of tutorials for AngularJS 1.x.

How to Create the Angular Scheduler Component Dynamically
How to Create the Angular Scheduler Component Dynamically
How to dynamically create and display the Angular Scheduler component using ViewContainerRef.createComponent().
Angular 9 Scheduler Quick Start Project
Angular 9 Scheduler Quick Start Project
Angular 9 project that includes Angular Scheduler component with all required boilerplate code. The project supports Ivy compiler in combination with AOT (ahead-of-time) compilation mode enabled.
Angular Calendar: Day/Week/Month Views
Angular Calendar: Day/Week/Month Views
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: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
Angular Scheduler: Row Searching Tutorial
Angular Scheduler: Row Searching Tutorial
How to find, focus and highlight a Scheduler row that matches the search criteria.
Angular Scheduler: Next/Previous Buttons
Angular Scheduler: Next/Previous Buttons
Angular 8 project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.
Angular 8 Timesheet Quick Start Project
Angular 8 Timesheet Quick Start Project
Angular 8 project with pre-configured Angular Timesheet component. You can download the project source code with the required boilerplate and quickly create a proof-of-concept Timesheet implementation.
Angular 8 Scheduler UI with Spring Boot Backend (Java)
Angular 8 Scheduler UI with Spring Boot Backend (Java)
Angular CLI project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).
Angular 8 Scheduler Quick Start Project
Angular 8 Scheduler Quick Start Project
Angular 8 project with pre-configured Angular Scheduler component. You can use this project as a quick start for your own Scheduler implementation.
Angular 8 Appointment Calendar Component (TypeScript + PHP/MySQL)
Angular 8 Appointment Calendar Component (TypeScript + PHP/MySQL)
Simple appointment scheduling application built using Angular 8. 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 8 Gantt Chart Component (TypeScript + PHP/MySQL)
Angular 8 Gantt Chart Component (TypeScript + PHP/MySQL)
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.
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Simple Angular application that shows how to use DayPilot Scheduler with PHP/MySQL backend.
Angular Work Order Scheduling (PHP/MySQL)
Angular Work Order Scheduling (PHP/MySQL)
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
Angular Scheduler: Row Header Actions
Angular Scheduler: Row Header Actions
How to add action controls to the Angular Scheduler row headers: clickable icons, hyperlinks, context menu buttons.
Angular 8 Hotel Room Booking Tutorial (PHP/MySQL)
Angular 8 Hotel Room Booking Tutorial (PHP/MySQL)
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.
Angular 8 Restaurant Table Reservation (PHP/MySQL)
Angular 8 Restaurant Table Reservation (PHP/MySQL)
Angular 8 application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
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 Scheduler: Zoom
Angular Scheduler: Zoom
How to add zoom feature to the Angular Scheduler component.
Angular Scheduler: Loading 400,000 Events
Angular Scheduler: Loading 400,000 Events
Test the performance of the Angular Scheduler component with 400,000 events loaded at once.
Angular Timetable Tutorial
Angular Timetable Tutorial
Angular 7 application that displays a weekly timetable with custom time blocks.
Articles 1-20 of 60 Next