How to Use Calendar Component in Angular Application

Saravanan G
November 20, 2023 UPDATED

In this blog post, we are going to see how to use the Calendar component in an Angular application. You will learn how to get started with a simple Calendar component and how to enable several of its features by extending the sample with simple code snippets.

The Angular Calendar is a form component that displays the date and days of the week for Gregorian and Islamic calendars. It provides month, year, and decade view options to navigate quickly to the desired date. This component is typically used in an application when you handle date-related operations like appointment scheduling.

Getting started with the Calendar component

The following steps guide you through the necessary configuration for the Calendar component in an Angular 8 application using the Angular CLI tool.

Use the following command to install the latest Angular CLI (8) locally in your application.
```
npm install -g @angular/cli@latest
```
Note: If you want to follow and run the application in Angular 7, Angular 6, Angular 5, or Angular 4, you need to replace the CLI command version number with the corresponding Angular version number.
```
npm install -g @angular/cli@<CLI VERSION>
```
Now, create a new Angular project using the command ng new and navigate to that folder.
```
ng new <Simple Calendar >
cd <Simple Calendar >
```
Use the following command to install the ej2-angular-calendars package locally in your application.
```
npm install @syncfusion/ej2-angular-calendars --save
```

Adding Angular 8 Calendar

Refer to the Syncfusion CDN link of CSS reference within the html file.

 <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" / >
 <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" / >
 <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" / >
 <link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" / >

Start to import the Calendar module into the Angular application (app.module.ts) from the ej2-angular-calendars package.

import {BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';

@NgModule({ 
    imports: [ BrowserModule, CalendarModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

Define the Angular Calendar code within the app.component.html file mapped against the templateUrl option in the app.component.ts file.
```
<ejs-calendar id=calendar [value]='value' [min]='minDate' [max]='maxDate' > </ejs-calendar >
```

Here, the Calendar component is rendered with the min and max properties.

export class AppComponent {
    public minDate: Date = new Date ("05/07/2017");
    public maxDate: Date = new Date ("08/27/2017");
    public value: Date = new Date ("05/16/2017");
    constructor () {}
}

Run the application with the command ng serve, and you’ll have a calendar with minimum and maximum dates, which will be displayed in the browser as shown in the following.
Adding Essential JS 2 Calendar component in an Angular application

Multiple date selection

Calendar allows selecting a single date, multiple dates, or a sequence of dates using the isMultiSelection and values properties. By default, the isMultiSelection property is false. Use the following code to enable the multiple date selection feature.

export class AppComponent {
    public value: Date [] = [new Date ("05/16/2017"), new Date ("05/12/2017"), new Date ("05/6/2017"), new Date ("05/26/2017"), new Date ("05/20/2017")]  
    public multiSelect: Boolean = true;
    constructor () {}
}

<ejs-calendar id=calendar [values]='value' [isMultiSelection]='multiSelect'  > </ejs-calendar >

Selecting multiple days in Essential JS 2 Calendar

Changing the first day of week

The Calendar component automatically updates the first day of the week based on the specified culture, and we can also change it based on the application requirements.

An option to change the first day of the week is using the firstDayOfWeek property. Days of the week go from 0 (Sunday) to 6 (Saturday). We are going to set Tuesday as the first day of the week.

export class AppComponent {
    public value: Date [] = [new Date ("05/16/2017"), new Date ("05/12/2017"), new Date ("05/6/2017"), new Date ("05/26/2017"), new Date ("05/20/2017")]  
    public multiSelect: Boolean = true;
    public weekStart: number = 2;
    constructor () {}
}

<ejs-calendar id=calendar [values]='value' [isMultiSelection]='multiSelect' [firstDayOfWeek]='weekStart'   > </ejs-calendar >

Setting Tuesday as the first day of the week in Essential JS 2 Calendar — Setting Tuesday as the first day of the week in the Essential JS 2 Calendar

Islamic Calendar (Hijri calendar)

The Islamic calendar, or Hijri calendar, is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To learn more about the Islamic calendar, please refer to Wikipedia.

By default, the calendar mode is Gregorian. You can enable the Islamic mode by setting the calendarMode to Islamic. We also need to import and inject the IslamicService module into the providers (app.module.ts).

import { CalendarModule, IslamicService } from '@syncfusion/ej2-angular-calendars';
@NgModule({ 
    imports: [ BrowserModule, CalendarModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
   providers: [IslamicService]
})

Now, you can set the calendarMode property to Islamic in the calendar code (app.component.html).

<ejs-calendar id=calendar [values]='value' [isMultiSelection]='multiSelect' [firstDayOfWeek]='weekStart' calendarMode='Islamic'    > </ejs-calendar >

Configuring Essential JS 2 Calendar to Islamic calendar — Configuring Essential JS 2 Calendar to the Islamic calendar

Conclusion

We hope you found this a useful overview of the Calendar component and its important features. Check out the other features of Calendar by downloading the free 30-day trial or cloning it from GitHub. Also, feel free to look at our online samples and documentation to explore other options.

If you wish to send us feedback or would like to ask any questions, please feel free to post in the comments section below or contact us through our support forum, support portal, or feedback portal.

Related blogs

Share this post:

Saravanan G

Saravanan is a Technical Product Manager at Syncfusion for Web products. He is passionate about Web technology and has been active in development since 2010 and focuses mainly on delivering the products with perfection.