Multi select in Angular Calendar component
21 Sep 20222 minutes 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.
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() {
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);