Search results

Multi Select in Angular Calendar component

29 Jul 2021 / 1 minute to read

Calendar provides an option to select single or multiple dates or sequence of dates by using isMultiSelection and values properties. By default, isMultiSelection property will be in disabled state.

The following example demonstrates the functionality of isMultiSelection property and values properties in the Calendar control.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    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() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);