--- title: "How to Use Calendar Component in Angular Application" published_at: "2019-10-30T11:00:24+00:00" modified_at: "2025-06-18T11:20:32+00:00" url: "https://www.syncfusion.com/blogs/post/angular-calendar-component" excerpt: "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..." taxonomy_category: - "Angular" - "Web" taxonomy_post_tag: - "Angular" - "Angular 8" - "Calendar" - "Hijri calendar" - "Islamic calendar" --- # How to Use Calendar Component in Angular Application [Saravanan G](https://www.syncfusion.com/blogs/author/saravanang) ![Getting started with Angular Calendar component](https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/Getting-started-with-Angular-Calendar-component_tile.png) In this blog post, we are going to see how to use the [Calendar](https://www.syncfusion.com/angular-components/angular-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](https://en.wikipedia.org/wiki/Gregorian_calendar) and [Islamic](https://en.wikipedia.org/wiki/Islamic_calendar) 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](https://github.com/angular/angular-cli) tool. 1. 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@ ``` 2. Now, create a new Angular project using the command **ng new** and navigate to that folder.``` ng new cd ``` 3. 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.``` ``` - 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.``` ``` - 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.[https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/Adding-Essential-JS-2-Calendar-component-in-an-Angular-application.png](https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/Adding-Essential-JS-2-Calendar-component-in-an-Angular-application.png) 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 () {} } ``` 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 () {} } ``` ``` ``` Setting Tuesday as the first day of the week in 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](https://en.wikipedia.org/wiki/Islamic_calendar) . 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**). ``` ``` Configuring Essential JS 2 Calendar to Islamic calendar ## Conclusion We hope you found this a useful overview of the [Calendar component](https://www.syncfusion.com/angular-ui-components/angular-calendar) and its important features. Check out the other features of Calendar by downloading the [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads) or cloning it from [GitHub](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/calendars) . Also, feel free to look at our [online samples](https://ej2.syncfusion.com/angular/demos/#/material/calendar/default) and [documentation](https://ej2.syncfusion.com/angular/documentation/calendar/getting-started/) 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](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/angular) . ## Related blogs - [Maximizing Angular Charts Performance with Lazy Loading](https://www.syncfusion.com/blogs/post/lazy-loading-angular-charts.aspx) - [Easily Build an Interactive BPMN Viewer and Editor in Angular](https://www.syncfusion.com/blogs/post/create-bpmn-viewer-using-angular.aspx) - [A Full-Stack Web App Using Angular and GraphQL: Part 1](https://www.syncfusion.com/blogs/post/full-stack-web-app-angular-graphql.aspx) - [What’s New in Angular Charts: 2023 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-angular-charts.aspx)