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.
This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Apr 22, 2026
How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.
Apr 18, 2026
Angular 21 application that displays the Scheduler in a full-page layout with a collapsible sidebar, date navigation, and switchable 100% height modes.
Apr 18, 2026
How to calculate resource utilization for time slots and show a bar chart in a fixed row displayed at the top of the Angular Scheduler component.
Apr 14, 2026
Angular 21 project that displays a task hierarchy using a Gantt Chart UI component. The frontend Angular application is connected to a PHP JSON backend with SQLite or MySQL storage.
Apr 10, 2026
An Angular 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.
Mar 23, 2026
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
Mar 22, 2026
Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.
Mar 21, 2026
Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.
Feb 14, 2026
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
Jan 25, 2026
Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.
Jan 23, 2026
How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.
Jan 23, 2026
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Jan 21, 2026
Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.
Jan 16, 2026
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Jan 15, 2026
This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.
Jan 13, 2026
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.
Jan 8, 2026
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
Jan 7, 2026
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
Jan 6, 2026
Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.
Jan 5, 2026
DayPilot
