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 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 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.
Angular 6 Hotel Room Booking Tutorial (PHP/MySQL)
Angular 6 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 6 Work Order Scheduling (PHP/MySQL)
Angular 6 Work Order Scheduling (PHP/MySQL)
Angular 6 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 6 Restaurant Table Reservation (PHP/MySQL)
Angular 6 Restaurant Table Reservation (PHP/MySQL)
Angular 6 application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Angular Scheduler: Full Screen Layout
Angular Scheduler: Full Screen Layout
Angular 6 application that displays the Scheduler in a full screen layout. The project includes a collapsible sidebar with a date picker.
Angular Scheduler: Modal Dialog for Event Editing
Angular Scheduler: Modal Dialog for Event Editing
Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.
Angular Scheduler: Row Filtering
Angular Scheduler: Row Filtering
Angular 6 application with real-time filtering of Scheduler component rows (by name, by number of events).
Angular Scheduler: Resource Management
Angular Scheduler: Resource Management
This tutorial shows how to use Angular 6 Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Angular Scheduler: Event Copy & Paste
Angular Scheduler: Event Copy & Paste
Angular scheduling application that allows creating events from existing events using copy&paste.
Angular Calendar: Full Screen Layout
Angular Calendar: Full Screen Layout
How to configure the Angular calendar component to use 100% height and fill the available space.
Angular Calendar: CSS Themes
Angular Calendar: CSS Themes
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Angular Scheduler: Date Navigation
Angular Scheduler: Date Navigation
Angular 6 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Angular Calendar: Date Switching
Angular Calendar: Date Switching
How to integrate Angular 6 event calendar component with a date picker and navigation buttons for changing the visible week.
Angular Scheduler: Displaying Event Phases
Angular Scheduler: Displaying Event Phases
Angular 6 project that shows how to display events split into phases in the Scheduler component.
Angular Scheduler: Rendering Angular Components Inside Events
Angular Scheduler: Rendering Angular Components Inside Events
How to add custom components to events displayed in the Angular Scheduler.
Articles 1-20 of 50 Next