Purpose of the Article: This article helps developers to implement their own Calendar and Scheduler features.

Intended Audience: Mobile Developers using React Native Framework

Tools and Technology: Angular and Day-pilot Library.

Keywords: Angular, Day-Pilot library, Calendar, Scheduler.

In this blog, I will explain the following things.

1. What is Day-Pilot Library?
2. How to create a calendar component using the Day-Pilot library?
3. How to create a scheduler component using the Day-Pilot library?

Pre-requisites

1. Angular 12
2. Day-Pilot pro library

About Day-pilot Calendar

1. Day-Pilot is a Third-Party Library (free-trail for Dev environment, paid for production), used to build Calendar, scheduler, Gantt chart, Monthly Calendar with various tutorials.
2. Various technologies support Day-Pilot: React Js, Angular, Vue Js, Asp.Net.
3. Day-Pilot supports lots of features. A few of them are event copy and paste, dynamic events, resources, row filtering, column filtering, etc.
4. Day-Pilot also supports theming and customization.

Benefits of implementing Calendar and Scheduler Components:

Using the calendar and/or scheduler component, we can achieve day, week, work-week, Month calendar views. This can be

1. Used to develop calendar applications like Google calendar, Teams calendar, etc.
2. Achieve same day, week, workweek, month calendar views in a matrix view concerning resources.
3. Divide an event into different phases called event phasing.
4. Build various functionalities and components using the Day-Pilot library.

The calendar component shows events in a calendar structure, whereas the schedular component shows events horizontally concerning resources.

Installation of Day-Pilot Library

Step 1:

• Install the npm package
• npm install  https://npm.daypilot.org/daypilot-pro-angular/trial/2021.3.5046.tar.gz
• You can find the link to the latest release at https://npm.daypilot.org/

Step 2:

• import the Day-pilot module in your child module or app. module.ts
• import {DayPilotModule} from “daypilot-pro-angular”.
• imports: [DayPilotModule]

Create a calendar component using Day-Pilot library.

Step 1:

• calendar component
• create a new angular component (example: calendar component)
• command: ng g c calendar.

calendar. component.ts

• In the template, we had used day pilot-calendar for that as we see we can bind our configuration as a property binding in the similar way events as well.
• In the code below, we show only the view type week. Also, the Day-Pilot supports day-view, work-week view, and month-view.
• In the below code, we had a function called onTimeRangeSelected in that we have a modal which is a feature of day-pilot, and it is customized.

Step 2:

• Create an Angular service using the following command
• command: ng g s data
• In the code below, we used the static/hardcoded events you can replace with API calls using HTTP-client.
• Please ensure that data service is in providers in your Angular module.

data. service.ts

Calendar Output:

Create a scheduler component using Day-Pilot library

Step 1:

• Scheduler component
• Create a new angular component (example: scheduler component)
• command: ng g c scheduler.

 scheduler. Component.ts

• In the template, we had used Day-Pilot – scheduler for that as we see we can bind our configuration as a property binding in the similar way events as well.
• In the code below, we had an Event-phasing where an event can be broken down into multiple phases.

Step 2:

• Create an Angular service using the following command,
• command: ng g s data
• In the code below, we used the static/hardcoded events and resources you can replace with API calls using HTTP-client.
• Please ensure that data service is in providers in your Angular module.

data. service.ts

scheduler component output: