Keyboard interaction in Angular Calendar component

17 Nov 20224 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.

app.component.ts

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() {
    }
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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