---
title: Overview
position: 1
seo_title: Overview of the MultiViewCalendar Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  MultiViewCalendar component and its types, check out the extensive set of
  available options in its live demo, and master its appearance by setting the
  orientation of the component.
---

## MultiViewCalendar Overview

The MultiViewCalendar component is a user interface tool that allows users to view multiple calendar views simultaneously. It helps users to navigate and select dates across several months or years in a single view. This feature is particularly useful for applications that require long-range planning or comparison of dates over extended periods, such as travel booking systems or financial planning applications. With the MultiViewCalendar, users can easily compare dates and make selections without switching between different calendar pages, which enhances usability and efficiency.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/calendar/multiview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/multiviewcalendar/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/dateinputs/multiview-calendar/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/multiviewcalendar"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/multiviewcalendar"}],"demo":"components/multiviewcalendar/overview"}'></LiveDemo>

### Appearance

MultiViewCalendars provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI MultiViewCalendar, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the MultiViewCalendar summarizes the visual and functional elements of the component. The main elements include a header, where the main buttons are displayed, and multiple calendar views.

The next image shows the anatomy of a horizontal MultiViewCalendar and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Header"},{"text":"Month view"},{"text":"Navigation highlight"},{"text":"Previous icon button"},{"text":"Today button"},{"text":"Next icon button"},{"text":"Left calendar"},{"text":"Right calendar"}]}'>![A Telerik and Kendo UI MultiViewCalendar component](images/components-multiviewcalendar-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI MultiViewCalendar.")</BlueprintImage>

#### Views

Depending on the user selection, the Telerik and Kendo UI MultiViewCalendar can display the following views:

* Month view
* Year view
* Decade view
* Century view

<BlueprintImage data='{"description":"","labels":[{"text":"Month view"},{"text":"Year view"},{"text":"Decade view"},{"text":"Century view"}]}'>![A Telerik and Kendo UI MultiViewCalendar component views](images/components-multiviewcalendar-overview-views.png "Views of a Telerik and Kendo UI MultiViewCalendar component")</BlueprintImage>

#### Orientation

Depending on the orientation, the Telerik and Kendo UI MultiViewCalendar can be any of the following types:

* Horizontal
* Vertical

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![A Telerik and Kendo UI MultiViewCalendar component orientation types](images/components-multiviewcalendar-overview-orientation.png "Orientation types of a Telerik and Kendo UI MultiViewCalendar component")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular MultiViewCalendar","description":"Find more information about the Kendo UI for Angular MultiViewCalendar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor MultiViewCalendar","description":"Find more information about the Telerik UI for Blazor MultiViewCalendar in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/calendar/multiview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery MultiViewCalendar","description":"Find more information about the Kendo UI for jQuery MultiViewCalendar in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/multiviewcalendar/overview"}'>![Kendo UI logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact MultiViewCalendar","description":"Find more information about the KendoReact MultiViewCalendar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/"}'>![KendoReact logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue MultiViewCalendar","description":"Find more information about the Kendo UI for Vue MultiViewCalendar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/dateinputs/multiview-calendar/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core MultiViewCalendar","description":"Find more information about the Telerik UI for ASP.NET Core MultiViewCalendar component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/scheduling/multiviewcalendar/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC MultiViewCalendar","description":"Find more information about the Telerik UI for ASP.NET MVC MultiViewCalendar component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/scheduling/multiviewcalendar/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>
</Wrap>