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.

View Source
Change Theme:

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 stateTo prevent users from interacting with the Calendar, you can render it in a disabled state until specific requirements are met.
  • DatesThe built-in configuration options allow you to set the behavior of the focused and selected dates.
  • Fast navigation barThe Calendar renders a navigation bar on the left, which allows users to switch quickly between date ranges.
  • Active viewYou can configure a default view that appears when the Calendar renders for the first time.
  • View selection depthThe Calendar provides options for controlling the view depth to which the user can navigate.
  • Date limitsYou can configure a specific date limit that allows the user to select dates only within that predefined range.
  • Week number columnYou can enable a column that displays the number of weeks.
  • Custom renderingThe Calendar provides various options for the rendering of custom child components, which allows you to alter the appearance of the Calendar.
  • Integration with JSONAs 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.
  • GlobalizationThe Calendar comes with globalization features allowing you to create applications that can be used all over the world.
  • Keyboard navigationThe Calendar component supports numerous keyboard shortcuts that allow users to interact with the component.
  • AccessibilityThe Calendar is accessible for screen readers and provides full WAI-ARIA support.

In this article

Not finding the help you need?