Components / React / DateInputs / Calendar
All components

Keyboard Navigation

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

The Calendar supports the following keyboard shortcuts:

Shortcut Description
Up Arrow Focuses the same date in the previous week.
Down Arrow Focuses the same date in the next week.
Left Arrow Focuses the previous date.
Right Arrow Focuses the next 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 previous month.
Ctrl+Down Arrow & Cmd+Down Arrow Focuses 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