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.

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.
Angular Calendar: Day/Week/Month Views
Angular Calendar: Day/Week/Month Views
Angular project that displays an event calendar component with day, week and months 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 7 Scheduler Quick Start Project
Angular 7 Scheduler Quick Start Project
Angular 7 project with pre-configured Scheduler component.
Angular Scheduler: CSS Themes
Angular Scheduler: CSS Themes
How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.
Angular Scheduler: Timeline Customization
Angular Scheduler: Timeline Customization
How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
Angular 6 Timesheet Quick Start Project
Angular 6 Timesheet Quick Start Project
Angular 6 timesheet application built using a customizable Scheduler component. It displays days on the vertical axis and time of day on the horizontal axis.
Articles 1-20 of 56 Next