Angular Calendar and Scheduler Tutorials

Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).

Use the online configurator application to generate a new Angular project with a customized Scheduler component.

Angular scheduling application that allows moving events using "cut and paste" and creating events from existing ones using "copy and paste" actions.

Learn how to insert custom components in Angular Scheduler row headers.

How to add a zoom feature to the Angular Scheduler component.

Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.

How to add custom components to events displayed in the Angular Scheduler.

The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.

How to add a custom Angular component to the upper-left corner of the Scheduler.

Web application with Angular calendar component configured to display a custom set of days as columns.

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 12 project with a pre-configured Angular Timesheet component. Download the project and use it as a starting point for your own implementation.

Angular project that displays a Scheduler component with dynamic event data loading enabled. Event data are loaded on demand during scrolling to improve scalability.

How to dynamically create and display the Angular Scheduler component using ViewContainerRef.createComponent().

Test the performance of the Angular Scheduler component with 400,000 events loaded at once.

Angular 12 project with a customized Angular Scheduler component. Use this project as a starting point for your own Angular scheduling application.

Angular application that displays a weekly timetable with custom time blocks.

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.

A quick start project that shows how to use the Angular 10 Timesheet component.

Angular 10 project with weekly event calendar component. Download the project source code and use it as a starting point of your own application.