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
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
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
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
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
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
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
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
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
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
The KendoReact MultiViewCalendar has built-in methods for selecting a range dates using just keyboard navigation.
See React MultiViewCalendar Keyboard Navigation demo
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
See KendoReact in action and check out how much it can do out-of-the-box.
Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.
Try KendoReact with dedicated technical support.