TypeScript Calendar and Scheduler Tutorials

This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.

Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.

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.

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.

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.

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.