Add a range selector calendar in Angular: a step by step guide

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

1. Single
2. Multi
3. 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:

1. 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.
2. 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.
3. 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:

1. Single
2. Multi
3. 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.