React MultiViewCalendar

Overview

The React MultiViewCalendar component offers a user interface with multiple calendars side by side to enable end users to select a range of dates spanning over multiple months. The component by default has an end and a start date, and dates can be selected across any time range.

See React MultiViewCalendar Overview demo

Disabled MultiViewCalendar

For scenarios that require UI elements to be disabled until a certain requirement has been met, the KendoReact MultiViewCalendar can be disabled with a single property and can be toggled on or off. This ensures that the React MultiViewCalendar prevents any interaction and showcases a clear visual indication that the component is disabled.

See React MultiViewCalendar Disabled demo

Focused Date

The calendars featured in the KendoReact MultiViewCalendar always have a focused date. By default, today’s date is used. This focused day has a slightly different visual style to make it stick out from the rest of the available days. What day is focused is of course completely customizable and can be changed by passing in a new day to a configuration option.

See React MultiViewCalendar Focused Date demo

Multiple Views

By default, the KendoReact MultiViewCalendar showcases two calendars side by side. With the Multiple Views feature, any number of calendars can be added to the collection of displayed calendars.

See React MultiViewCalendar Multiple Views demo

View Selection

The View Selection feature of the KendoReact MultiViewCalendar allows for the built-in calendars to render a different initial view, including showing the days of the month, months of the year, years of the decade and decades of the century.

See React MultiViewCalendar View Selection demo

Reverse Range

Selection within the KendoReact MultiViewCalendar can be done both from a start date to the end date, as well as the end date to the start date. Thanks to the reverse range selection feature of the React MultiViewCalendar, no matter which order dates are selected, the component will always keep track of the start and end dates.

See React MultiViewCalendar Reverse Range demo

Week Number Column

With a single property, the KendoReact MultiViewCalendar component can show or hide a column responsible for displaying the appropriate week number next to each week displayed in the rendered calendars.

See React MultiViewCalendar Week Number Column demo

Custom Rendering

The KendoReact MultiViewCalendar enables developers to render custom components instead of the default parts of the component including the cells of the calendar, the week column cells, as well as the title element of any calendar.

See React MultiViewCalendar Custom Rendering demo

Controlled and Uncontrolled Modes

React components used in forms can come as uncontrolled components, which let the form data be controlled directly by the DOM, or as controlled components where the form data is handled by a React component. By default, the KendoReact MultiViewCalendar is in uncontrolled component mode, but can be a controlled component with little to no extra configuration.

See React MultiViewCalendar Controlled and Uncontrolled Modes demo

Globalization

The KendoReact MultiViewCalendar component supports localization and globalization out of the box, allowing for any built-in message of the component to be rendered in a different language.

See React MultiViewCalendar Globalization demo

Keyboard Navigation

The KendoReact MultiViewCalendar has built-in methods for selecting a range dates using just keyboard navigation.

See React MultiViewCalendar Keyboard Navigation demo

Accessibility

Creating accessible React UI components is a core concept of KendoReact, and the React MultiViewCalendar is no exception! The KendoReact MultiViewCalendar is built to be compliant with Section 508 and WAI-ARIA standards, and is AAA rated with WCAG 2.0.

See React MultiViewCalendar Accessibility demo