Log in to like this post! Add a range selector calendar in Angular: a step by step guide Dhananjay Kumar / Sunday, June 9, 2019 In the first week of May, I attended ngConf 2019 and I had the wonderful opportunity to talk to many Angular developers about Ignite UI and Angular in general. Developers were very impressed by Ignite UI for Angular, which includes an Angular Material-based library consisting of more than 80 components, directives, and services to help you build Angular enterprise applications faster. You can learn more here One question I was asked frequently: How to select a date range in a Calendar. In this blog post, I’ll show you how to do that. You need to use Ignite UI for Angular igx-calendar component to add a calendar in the application. The igx-calendar component comes in three selection modes Single Multi Range I’ll use a step-by-step approach to show you how to use igx-calendar in an Angular application. Step 1: Add Ignite UI for Angular in Angular Project There are three ways to add an Ignite UI to an Angular project: If starting a new project, use the Ignite UI CLI to scaffold the project. You can use command line options to add the igx-calendar, including dependency installation. In an existing project, you can use the Ignite UI for Angular Toolbox Extension to add an igx-calendar in the project. Learn how in this blog post. You can use npm to install Ignite UI for Angular dependencies in your project. You can learn that in details here : Step-by-Step with Images to Add Ignite UI for Angular in an Existing Angular Project Step 2: Add required modules for igx-calendar To work with igx-calendar, you need to add IgxCalendarModule and BrowserAnimtaionModule. We will display messages in the igx-dialog, so for that purpose we have also added IgxDialogModule Modules can be added as shown in the code listing below: import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { IgxCalendarModule, IgxDialogModule } from 'igniteui-angular'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, IgxCalendarModule, IgxDialogModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } I have added dependencies in the AppModule, however you can add in it any other features. Step 3: Use igx-calendar You can simply use igxCalendar in the component template as shown in the listing below: <igx-calendar selection="range" (onSelection)="verifyRange($event)"> </igx-calendar > There are three selection modes available for the calendar. They are as follows: Single Multi Range By default, the selection is set to single. To work with date range selection, we have set selection property to range. When the user selects date onSelection, an event will be fired. In the event handler, you can work with the selected date range, verifying the range, among other options. Let us also add igx-dialog component to display messages. <igx-calendar #calendar selection="range" (onSelection)="verifyRange($event)"> </igx-calendar> <igx-dialog #alert title="Notification" message="You have selected date" leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"> </igx-dialog> Note that I have added temp ref variables to both components such that we can read them in the component class. Step 4: Reading calendar in component class Like any other element or component of a template, you can read igx-calendar using ViewChild decorator. Simplifying ViewChild and ContentChild in Angular Start with importing IgxCalendarComponent and IgxDialogComponent, import { IgxCalendarComponent, IgxDialogComponent } from 'igniteui-angular'; Create properties decorated with @ViewChild reading the temp variable name as shown below: @ViewChild('calendar') public calendar: IgxCalendarComponent; @ViewChild('alert') public dialog: IgxDialogComponent; Now you can read all properties and events of IgxCalendarComponent and IgxDialogComponent in appropriate life cycle of component class such as ngAfterViewInit Step 5: Handle date selection event You can handle a date selection event as shown in the next listing : verifyRange(dates: Date[]) { if (dates.length > 5) { this.calendar.selectDate(dates[0]); this.dialog.message = this.calendar.value[0]; this.dialog.message = 'select at max 5 dates'; this.dialog.open(); } else { this.dialog.message = 'You have seleceted start date :' + dates[0] + ' end date :' + dates[dates.length - 1]; this.dialog.open(); } } IgxCalendarComponent returns single date object for default value and for range selection it returns date type object array. You can work with returned array like pure JavaScript date object array as per your need. I am reading the length of the array and, if it is more than 5, I am passing different messages in igx-dialog. If it’s less than 5, I’m passing start and end date. That’s it. As you can see, it’s quite simple to work with date range selections in Angular applications using igx-calendar component. You may also want to explore other components in the Ignite UI library to build an enterprise Angular application faster.