KendoReact Calendar Overview

The KendoReact Calendar is a form component that represents a graphical Gregorian calendar and supports the selection of and navigation between dates and date ranges for scheduling appointments.

The following example demonstrates the Calendar in action.

Change Theme

Theme

Loading ...

The Calendar is part of the KendoReact Date Inputs component library. The procedures for installing, importing, and using the Date Inputs are identical for all components in the package. To learn how to use the Calendar and the rest of the Date Inputs, see the Getting Started with the KendoReact Date Inputs guide.

Key Features

• Disabled state—To prevent users from interacting with the Calendar, you can render it in a disabled state until specific requirements are met.
• Dates—The built-in configuration options allow you to set the behavior of the focused and selected dates.
• Fast navigation bar—The Calendar renders a navigation bar on the left, which allows users to switch quickly between date ranges.
• Active view—You can configure a default view that appears when the Calendar renders for the first time.
• View selection depth—The Calendar provides options for controlling the view depth to which the user can navigate.
• Date limits—You can configure a specific date limit that allows the user to select dates only within that predefined range.
• Week number column—You can enable a column that displays the number of weeks.
• Custom rendering—The Calendar provides various options for the rendering of custom child components, which allows you to alter the appearance of the Calendar.
• Integration with JSON—As the Calendar works only with the date JavaScript instances, the component provides built-in options for binding it to dates that are serialized in a JSON format.
• Globalization—The Calendar comes with globalization features allowing you to create applications that can be used all over the world.
• Keyboard navigation—The Calendar component supports numerous keyboard shortcuts that allow users to interact with the component.
• Accessibility—The Calendar is accessible for screen readers and provides full WAI-ARIA support.

Suggested Links

• API Reference of the Calendar
• Getting Started with the KendoReact Date Inputs
• React Calendar High-Level Overview