How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
Sep 17, 2018
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 filtering, undo/redo, event copy and paste, dynamic 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 6 timesheet application built using a customizable Scheduler component. It displays days on the vertical axis and time of day on the horizontal axis.
Sep 12, 2018
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.
Sep 12, 2018
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
Sep 2, 2018
Angular 6 application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Aug 31, 2018
Angular 6 application that displays the Scheduler in a full screen layout. The project includes a collapsible sidebar with a date picker.
Aug 2, 2018
Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.
Aug 2, 2018
Angular 6 application with real-time filtering of Scheduler component rows (by name, by number of events).
Jul 10, 2018
This tutorial shows how to use Angular 6 Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Jul 8, 2018
Angular scheduling application that allows creating events from existing events using copy&paste.
Jul 8, 2018
How to configure the Angular calendar component to use 100% height and fill the available space.
Jul 4, 2018
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Jul 4, 2018
Angular 6 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Jun 24, 2018
How to integrate Angular 6 event calendar component with a date picker and navigation buttons for changing the visible week.
Jun 22, 2018
Angular 6 project that shows how to display events split into phases in the Scheduler component.
Jun 17, 2018
How to add custom components to events displayed in the Angular Scheduler.
Jun 13, 2018
Angular 6 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.
Jun 13, 2018
Angular 6 application that shows how to switch the Scheduler (which is in "edit" mode by default) to read-only mode.
Jun 13, 2018
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).
Jun 11, 2018
The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.
Jun 8, 2018
Articles 1-20 of 46
Next