You can use the following keys to interact with the Calendar. The component implements the keyboard navigation support by following the WAI-ARIA practices
It supports the below list of shortcut keys.
Press | To do this |
---|---|
Upper Arrow | Focus the previous week date. |
Down Arrow | Focus the next week date. |
Left Arrow | Focus the previous date. |
Right Arrow | Focus the next date. |
Home | Focus the first date in the month. |
End | Focus the last date in the month. |
Page Up | Focus the same date in the previous month. |
Page Down | Focus the same date in the next month. |
Enter | Select the currently focused date. |
Shift + Page Up | Focus the same date in the previous year. |
Shift + Page Down | Focus the same date in the previous year. |
Control + Upper Arrow | Moves into the inner level of view like month-year, year-decade |
Control + Down Arrow | Moves out from the depth level view like decade-year, year-month |
Control + Home | Focus the starting date in the current year. |
Control + End | Focus the ending date in the current year. |
To focus the Calendar component use the
alt+t
keys.
import { Component,HostListener,ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ejs-calendar #ejCalendar [value]='dateValue'></ejs-calendar>
`
})
export class AppComponent {
@ViewChild('ejCalendar') ejCalendar: CalendarComponent;
public dateValue: Date = new Date();
@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.altKey && event.keyCode === 84 /* t */) {
// press alt+t to focus the control.
this.ejCalendar.element.querySelectorAll('.e-content table')[0].focus();
}
}
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);