TypeScript Calendar and Scheduler Tutorials

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.

How to export the Scheduler view to Angular, including frozen time headers (X axis) and row headers (Y axis). Add a custom row with utilization summary to the frozen headers.

An Angular application that shows how to use DayPilot Scheduler with a PHP/MySQL backend.

Angular 18 project that shows how to display events split into phases in the Scheduler component.

Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.

Angular application with Scheduler component that can filter events in real time (by text, category, duration).

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

How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.

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

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

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.

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

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().

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

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.