Keyboard Navigation

The keyboard navigation of the MultiViewCalendar is always available.

The MultiViewCalendar supports the following keyboard shortcuts:

Shortcut Description
Up Arrow Focuses a date in the previous week.
Down Arrow Focuses a date in the next week.
Left Arrow Focuses the previous available date.
Right Arrow Focuses the next available date.
Enter Selects the focused date.
Home Focuses the first date in the month.
End Focuses the last date in the month.
PageUp Focuses the same date in the previous month.
PageDown Focuses the same date in the next month.
Ctrl+Up Arrow & Cmd+Up Arrow Focuses the same date in the upper view.
Ctrl+Down Arrow & Cmd+Down Arrow Focuses the same date in the lower view.
class App extends React.Component {
    calendar;
    componentDidMount() {
        if(this.calendar && this.calendar.element) {
            this.calendar.element.focus();
        }
    }
    render() {
        return(
            <MultiViewCalendar
                ref={(el) => this.calendar = el}
            />
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article