You can set or get the currently selected date of the calendar using the
value
property.
The following example demonstrates the Calendar with selected date and
change
event
to display the selected date value.
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
@Component({
selector: 'app-root',
template: `<ejs-calendar #ejCalendar [value]='dateValue' (change)='onChange($event)'></ejs-calendar>
<p id=output style="margin-left:18%; margin-left: 31%;word-wrap: break-word;"></p>`
})
export class AppComponent {
@ViewChild('ejCalendar') ejCalendar: CalendarComponent;
public dateValue: Date = new Date();
constructor() {
}
ngAfterViewInit(): void {
document.getElementById('output').textContent = "" + this.ejCalendar.value;
}
onChange(args) {
document.getElementById('output').textContent = "" + args.value;
}
}
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);