Keyboard Navigation

The keyboard navigation of the MultiViewCalendar is always available.

The MultiViewCalendar supports the following keyboard shortcuts:

ShortcutDescription
Up ArrowFocuses a date in the previous week.
Down ArrowFocuses a date in the next week.
Left ArrowFocuses the previous available date.
Right ArrowFocuses the next available date.
EnterSelects the focused date.
HomeFocuses the first date in the month.
EndFocuses the last date in the month.
PageUpFocuses the same date in the previous month.
PageDownFocuses the same date in the next month.
Ctrl+Up Arrow & Cmd+Up ArrowFocuses the same date in the upper view.
Ctrl+Down Arrow & Cmd+Down ArrowFocuses 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
 /