Date Inputs / Calendar / Keyboard Navigation
material theme

Keyboard Navigation

By default, the keyboard navigation of the Calendar is enabled.

The Calendar supports the following keyboard shortcuts:

ShortcutDescription
Up ArrowFocuses the same date in the previous week.
Down ArrowFocuses the same date in the next week.
Left ArrowFocuses the previous date.
Right ArrowFocuses the next 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 previous month.
Ctrl+Down Arrow & Cmd+Down ArrowFocuses the same date in the next month.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Calendar } from '@progress/kendo-react-dateinputs';

class App extends React.Component {
    render() {
        return <Calendar />;
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /