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.
The following steps guide you through the necessary configuration for the Calendar component in an Angular 8 application using the Angular CLI tool.
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>
ng new <Simple Calendar > cd <Simple Calendar >
npm install @syncfusion/ej2-angular-calendars --save
<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" / >
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 ] })
<ejs-calendar id=calendar [value]='value' [min]='minDate' [max]='maxDate' > </ejs-calendar >
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 () {} }
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 >
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 >
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 >
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.