This is a list of calendar and scheduler tutorials written in TypeScript. TypeScript is a programming language created by Microsoft that extends JavaScript and adds new features to it, like static typing.
Applications written in in TypeScript need to be compiled to JavaScript before they can be run in the browser. This adds a complication step to the deployment workflow (JavaScript can be run directly) which makes the deployment more complicated. However, there are tools available that automate the compilation. Also, the compiler can perform additional optimizations (like the Angular compiler does) and that can compensate for the hassle.
The most prominent use of TypeScript is probably the Angular framework which chooses TypeScript as its primary language. You can also use TypeScript in React and Vue projects.
DayPilot Pro for JavaScript includes TypeScript definitions that describe the DayPilot API. Some IDEs (like WebStorm or Visual Studio) can read the TypeScript definitions and offer code hints for JavaScript projects as well.
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 20 calendar/scheduler application.
May 30, 2025
How to create an integrated day, week, and month calendar view with a shared data source in Next.js.
Mar 6, 2025
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.
Mar 5, 2025
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.
Jan 15, 2025
This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.
Dec 13, 2024
Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.
Nov 17, 2024
Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.
Oct 15, 2024
An Angular application that shows how to use DayPilot Scheduler with a PHP/MySQL backend.
Oct 3, 2024
How to detect mobile device rotation and switch the Angular Calendar view accordingly.
Aug 16, 2024
Angular 18 project that shows how to display events split into phases in the Scheduler component.
Jul 16, 2024
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.
Jul 12, 2024
Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Jul 7, 2024
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.
Jul 1, 2024
Angular application with Scheduler component that can filter events in real time (by text, category, duration).
Jun 30, 2024
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
Jun 23, 2024
How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.
Jun 18, 2024
Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
Jun 18, 2024
How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.
Jun 14, 2024
An Angular 18 project template that you can use as a starting point for your own implementation of an interactive timesheet. Learn how to adjust the timesheet appearance and add visual elements.
Jun 7, 2024
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
Jan 14, 2024
DayPilot
