Blogs

Creating Calendar and Scheduler Components Using Day-Pilot Pro Library in Angular

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:

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:

Shireesha BHUMIREDDY

Shireesha BHUMIREDDY

Software Engineer
Enterprise Application Development-Digital Transformation
Angular developer with over 2 years of experience in software development. Passionate about developing user-friendly web applications. Proven ability to work independently and as part of a team.

Leave A Comment

Related Post

Making the Web Accessible

Purpose of the Article: How to create a custom Vue component and publish it as an npm package Intended Audience: Frontend Developers(Vuejs) Tools and Technology:

Read More »