TypeScript Tutorials

This is a list of calendar and scheduling tutorials written in TypeScript. TypeScript is a new 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.

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.

Angular Scheduler: Read-Only and Edit Mode Switching
Angular Scheduler: Read-Only and Edit Mode Switching
Angular 10 application that shows how to switch the Scheduler (which is in "edit" mode by default) to read-only mode.
Angular 10 Timesheet Quick Start Project
Angular 10 Timesheet Quick Start Project
A quick start project that shows how to use the Angular 10 Timesheet component.
Angular Gantt Chart Component (TypeScript + PHP/MySQL)
Angular Gantt Chart Component (TypeScript + PHP/MySQL)
Angular project that displays a hierarchy of tasks using a Gantt Chart UI component. The frontend Angular application is connected to a JSON backend implemented in PHP with MySQL database.
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, length).
Angular 10 Event Calendar Quick Start Project
Angular 10 Event Calendar Quick Start Project
Angular 10 project with weekly event calendar component. Download the project source code and use it as a starting point of your own application.
Angular Scheduler: Dynamic Context Menu
Angular Scheduler: Dynamic Context Menu
Angular 10 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
Angular Scheduler: Undo/Redo
Angular Scheduler: Undo/Redo
Angular tutorial that shows how to implement undo/redo for Angular Scheduler UI component.
Angular 10 Scheduler Quick Start Project
Angular 10 Scheduler Quick Start Project
How to add a visual Scheduler component to your Angular 10 application. The Scheduler will let you plan and manage reservations, meetings, work orders and other events.
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 9 Timesheet Quick Start Project
Angular 9 Timesheet Quick Start Project
A quick start project that shows how to use Timesheet component in an Angular 9 project. You can use the Timesheet component to record payroll, billing and reporting information.
Using DayPilot Modal in Angular Application (TypeScript)
Using DayPilot Modal in Angular Application (TypeScript)
DayPilot Modal is now available as a NPM package (@daypilot/modal) and can be used in Angular applications as well.
Angular Resource Calendar Tutorial
Angular Resource Calendar Tutorial
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 Scheduler Tutorial (TypeScript + PHP/MySQL)
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Simple Angular application that shows how to use DayPilot Scheduler with PHP/MySQL backend.
Angular Scheduler: Event Links
Angular Scheduler: Event Links
Angular tutorial that shows how to link related events in Angular Scheduler UI component.
Angular Scheduler: Highlighting Holidays
Angular Scheduler: Highlighting Holidays
Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.
Angular Hotel Room Booking Tutorial (PHP/MySQL)
Angular Hotel Room Booking Tutorial (PHP/MySQL)
Angular hotel room reservation application. The user interface supports managing rooms (create, edit, delete, change status) and reservations (create, edit, move, delete, change status). Includes a PHP/MySQL backend with token-based authentication.
How to Create the Angular Scheduler Component Dynamically
How to Create the Angular Scheduler Component Dynamically
How to dynamically create and display the Angular Scheduler component using ViewContainerRef.createComponent().
Angular 9 Scheduler Quick Start Project
Angular 9 Scheduler Quick Start Project
Angular 9 project that includes Angular Scheduler component with all required boilerplate code. The project supports Ivy compiler in combination with AOT (ahead-of-time) compilation mode enabled.
Articles 1-20 of 54 Next