@progress/kendo-dateinputs-react-wrapper/docs/calendar/keyboard-navigation.md

Kendo UI DateInputs wrapper for React

---
title: Keyboard Navigation
page_title: Keyboard Navigation - Calendar - Kendo UI Wrappers for React
description: "Use the Kendo UI Calendar wrapper keyboard navigation in React projects."
slug: keyboard_navigation_calendar
position: 2
---

# Keyboard Navigation

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

The Calendar supports the following keyboard shortcuts:

| Shortcut                                  |  Description                                             |
|:---                                       | :---                                                     |
| `Left Arrow`                              |  Highlights the previous day.                            |
| `Right Arrow`                             |  Highlights the next day.                                |
| `Up Arrow`                                |  Highlights the same day from the previous week.         |
| `Down Arrow`                              |  Highlights the same day from the next week.             |
| `Ctrl` & `Left Arrow`                     |  Navigates to the previous month.                        |
| `Ctrl` & `Right Arrow`                    |  Navigates to the next month.                            |
| `Ctrl` & `Up Arrow`                       |  Navigates to the previous view.                         |
| `Ctrl` & `Down Arrow`                     |  Navigates to the next view.                             |
| `Home`                                    |  Highlights the first day of the month.                  |
| `End`                                     |  Highlights the last day of the month.                   |
| `Enter` or `Space`                        |  If the Calendar is in the `month` view, selects the highlighted day. In other views, navigates to the lower view. |
| `Ctrl` & `Enter` or `Space`               |  Adds the highlighted day to the current selection. If that day was already selected, removes it from the selection.|
| `Shift` & `Left Arrow` or `Right Arrow`   |  Adds the next or previous date to the selected items. |
| `Shift` & `Up Arrow` or `Down Arrow`      |  Extends the selection up or down one row in the month view.    |
| `Shift` & `Enter` or `Space`              |  Performs a range selection. Selects all dates between the last selected one (with `ENTER` or `SPACE` and a mouse click) and the selection which holds the focused cell.|

```jsx-preview

    class LayoutsContainer extends React.Component {

      render() {
        return (
            <div className={"row example-wrapper"}>
                <div className={"col-xs-12 col-md-6 example-col"}>
                    <Calendar selectable={"multiple"} />
                </div>
            </div>
        );
      }
    }

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

## Suggested Links

* [Kendo UI Calendar for jQuery](https://docs.telerik.com/kendo-ui/controls/scheduling/calendar/overview)
* [API Reference of the Calendar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar)