TypeScript Calendar and Scheduler Tutorials

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.

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 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 17 Timesheet Quick Start Project
Angular 17 Timesheet Quick Start Project
An Angular 17 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.
Angular 17 Scheduler Quick Start Project
Angular 17 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 17 calendar/scheduler application.
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).
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.
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 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.
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.
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
Angular Calendar with Undo/Redo (Open-Source)
Angular Calendar with Undo/Redo (Open-Source)
This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.
Angular Scheduler: Event Cut, Copy & Paste
Angular Scheduler: Event Cut, Copy & Paste
Angular scheduling application that allows moving events using "cut and paste" and creating events from existing ones using "copy and paste" actions.
Angular Scheduler: Add Angular Components to Row Headers
Angular Scheduler: Add Angular Components to Row Headers
Learn how to insert custom components in Angular Scheduler row headers.
Angular Scheduler: Zoom
Angular Scheduler: Zoom
How to add a zoom feature to the Angular Scheduler component.
Angular Scheduler: Displaying Event Phases
Angular Scheduler: Displaying Event Phases
Angular 14 project that shows how to display events split into phases in the Scheduler component.
Angular Scheduler: Integration with a Date Picker
Angular Scheduler: Integration with a Date Picker
Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Angular Scheduler: Resource Management
Angular Scheduler: Resource Management
This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Articles 1-20 of 78 Next