Kendo UI for Angular MultiViewCalendar Overview

The Kendo UI for Angular MultiViewCalendar is an Angular form control that represents a graphical Gregorian calendar with multiple horizontal views.

It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.

The MultiViewCalendar Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the MultiViewCalendar in action.

View Source
Change Theme:

Key Features

  • Disabled MultiViewCalendarYou can use the configuration options of the MultiViewCalendar to disable the component so that users are not able to interact with it.
  • Focused and selected datesYou can also control the focused and selected dates within the MultiViewCalendar.
  • Disabled datesThe MultiViewCalendar supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
  • Date rangesWithin the MultiViewCalendar, you can display a start-end date period as a selection range.
  • Active viewYou can control the initially loaded page of the Calendar and render it in a month, year, decade, or year view.
  • Multiple viewsYou can also control the number of the horizontally rendered MultiViewCalendar views.
  • View headerThe MultiViewCalendar provides options for rendering a header for each view.
  • View selection depthThe MultiViewCalendar provides an option for setting the view depth to which the user can navigate.
  • Navigation animationYou can enable the navigation animation for the MultiViewCalendar.
  • Multiple selectionAllow users to select multiple dates at once.
  • TemplatesYou can customize the content of each Calendar cell and define a cell template.
  • Week number columnThe Calendar also supports options for rendering a column displaying the number of the weeks.
  • Forms supportYou can use the Calendar both in template-driven and reactive Angular forms.
  • Integration with JSONAs the Calendar works only with date JavaScript instances while the received data from the server is serialized in a JSON format, the component provides options for binding it to dates which are serialized as strings.
  • GlobalizationAll Kendo UI for Angular Date Inputs provide globalization options.
  • AccessibilityThe Calendar is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe Calendar supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?