Angular Calendar and Scheduler Tutorials

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.

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.

DayPilot Modal is now available as a NPM package (@daypilot/modal) and can be used in Angular applications as well.

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.

Angular 8 project with pre-configured Angular Timesheet component. You can download the project source code with the required boilerplate and quickly create a proof-of-concept Timesheet implementation.

Angular 8 project with pre-configured Angular Scheduler component. You can use this project as a quick start for your own Scheduler implementation.

Angular 7 project with pre-configured Scheduler component.

Angular 6 timesheet application built using a customizable Scheduler component. It displays days on the vertical axis and time of day on the horizontal axis.

Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.

Angular 6 project that uses a pre-configured Scheduler component to display a timeline for multiple resources.

Angular 5 project that displays a Kanban board with activity cards that can be moved using drag and drop. Angular 5 project with TypeScript source code is available for download.

Angular 5 application that displays a timesheet for recording payroll, billing and reporting information. The timesheet component supports weekly/monthly view with customizable work hours, drag and drop, weekend highlighting.

A quick start Angular 5 project that displays a hierarchy of tasks and milestones using Angular 5 Gantt chart component. Supports drag and drop, TypeScript source code included.

A quick start Angular 5 project that displays an Angular 5 Scheduler component - a timeline for multiple resources (displayed in a tree hierarchy). Supports drag and drop, TypeScript source code included.

Angular 5 project with basic weekly calendar configuration. Includes all dependencies and required boilerplate code - you can use it as a starting point for your own scheduling project.

A quick start project that shows how to use DayPilot Scheduler in an Angular 4 project (built using Angular CLI 1.0).

A quick start Angular 5 project that displays appointments and events using a monthly calendar UI component.

A quick start project that shows how to use Timesheet component in an Angular 4 project (built using Angular CLI).

A quick start project that shows how to use Kanban component in an Angular 4 project (built using Angular CLI).

A quick start project that shows how to use DayPilot Monthly Calendar in an Angular 4 project (built using Angular CLI 1.0).