Multi Select in Angular Calendar

31 Aug 20262 minutes to read

Multiple Date Selection

The Calendar provides an option to select a single date, multiple dates, or a sequence of dates by using the isMultiSelection and values properties. By default, the isMultiSelection property is false.

The values property is of type Date[] and is only effective when isMultiSelection is set to true. Use the value property for single-date selection and the values property for multiple-date selection; when isMultiSelection is enabled, the values array takes precedence over value.

The following example demonstrates the functionality of the isMultiSelection and values properties by showing multiple pre-selected dates in the Calendar control.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
              <!-- Sets the isMultiSelection and values properties-->
              <ejs-calendar [values]='dateValues' [isMultiSelection]='multiSelect'></ejs-calendar>
        `
})
export class AppComponent {
    public dateValues: Date[] = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];
    public multiSelect: Boolean = true;
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also