Having trouble getting help?
Contact Support
Contact Support
Keyboard interaction in Angular Calendar component
27 Apr 20244 minutes to read
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'
import { Component,HostListener,ViewChild } from '@angular/core';
@Component({
imports: [
CalendarModule //declaration of ej2-angular-calendars module into NgModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-calendar #ejCalendar [value]='dateValue'></ejs-calendar>
`
})
export class AppComponent {
@ViewChild('ejCalendar') ejCalendar: any;
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));