Skip to content
DayPilot

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 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 Scheduler: Rendering Angular Components Inside Events

Angular Scheduler: Rendering Angular Components Inside Events

How to add custom components to events displayed in the Angular Scheduler.
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: How to Add Components to the Upper-Left Corner

Angular Scheduler: How to Add Components to the Upper-Left Corner

How to add a custom Angular component to the upper-left corner of the Scheduler.
Angular Scheduler: Next/Previous Buttons

Angular Scheduler: Next/Previous Buttons

Angular project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.
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: Infinite Scrolling

Angular Scheduler: Infinite Scrolling

How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)

Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)

Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
Angular Scheduler: How to Disable Time Slots

Angular Scheduler: How to Disable Time Slots

How to disable selected time slots of the Angular Scheduler using drag and drop.
Next.js Scheduler with Horizontal Timeline (Open-Source)

Next.js Scheduler with Horizontal Timeline (Open-Source)

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.
Angular Gantt Chart: Full Screen Layout

Angular Gantt Chart: Full Screen Layout

How to integrate the Angular Gantt chart component into a page with a full-screen layout. Get rid of duplicate vertical scrollbars and fix the time header.
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: Full Screen Layout

Angular Calendar: Full Screen Layout

How to configure the Angular calendar component to use 100% height and fill the available space.
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 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 22 Timesheet Quick Start Project

Angular 22 Timesheet Quick Start Project

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.
Angular 22 Scheduler Quick Start Project

Angular 22 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 22 calendar/scheduler application.
Angular Scheduler: Row Filtering

Angular Scheduler: Row Filtering

Angular application with real-time filtering of Scheduler component rows (by name, by number of events).
Angular Scheduler: Row Searching Tutorial

Angular Scheduler: Row Searching Tutorial

How to find, focus and highlight a Scheduler row that matches the search criteria.
Angular Scheduler: Undo/Redo

Angular Scheduler: Undo/Redo

Angular tutorial that shows how to implement undo/redo functionality for the DayPilot Lite Angular Scheduler UI component.