TypeScript Calendar and Scheduler Tutorials

React Scheduler: TypeScript Project
React Scheduler: TypeScript Project
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
Next.js Weekly Calendar (Open-Source)
Next.js Weekly Calendar (Open-Source)
Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.
Angular Resource Calendar (Open-Source)
Angular Resource Calendar (Open-Source)
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.
Next.js Calendar with Day/Week/Month Views (Open-Source)
Next.js Calendar with Day/Week/Month Views (Open-Source)
How to create an integrated day, week, and month calendar view with a shared data source in Next.js.
Angular Calendar: Day/Week/Month Views (Open-Source)
Angular Calendar: Day/Week/Month Views (Open-Source)
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.
Angular 21 Scheduler Quick Start Project
Angular 21 Scheduler Quick Start Project
A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 21 calendar/scheduler application.
Angular Scheduler: Freeze Headers during Export to Excel (XLSX)
Angular Scheduler: Freeze Headers during Export to Excel (XLSX)
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.
Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions
Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions
How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.
Angular Calendar: Event Filtering
Angular Calendar: Event Filtering
Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
An Angular application that shows how to use DayPilot Scheduler with a PHP/MySQL backend.
Angular Calendar: Detect Orientation Change (Landscape/Portrait)
Angular Calendar: Detect Orientation Change (Landscape/Portrait)
How to detect mobile device rotation and switch the Angular Calendar view accordingly.
Angular Scheduler: Displaying Event Phases
Angular Scheduler: Displaying Event Phases
Angular 18 project that shows how to display events split into phases in the Scheduler component.
Angular Restaurant Table Reservation (PHP/MySQL)
Angular Restaurant Table Reservation (PHP/MySQL)
Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Angular Scheduler: Event Filtering
Angular Scheduler: Event Filtering
Angular application with Scheduler component that can filter events in real time (by text, category, duration).
Angular Work Order Scheduling (PHP/MySQL)
Angular Work Order Scheduling (PHP/MySQL)
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
Angular Scheduler: Drag and Drop Task Queue
Angular Scheduler: Drag and Drop Task Queue
How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.
Angular Scheduler: Dynamic Context Menu
Angular Scheduler: Dynamic Context Menu
Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
Angular Scheduler UI with Spring Boot Backend (Java)
Angular Scheduler UI with Spring Boot Backend (Java)
Angular project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).
Angular Scheduler: Row Filtering
Angular Scheduler: Row Filtering
Angular 16 application with real-time filtering of Scheduler component rows (by name, by number of events).
Previous Articles 21-40 of 85 Next