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

The Calendar component is a UI element that allows users to manage appointments and events. It provides a visual representation of the Gregorian calendar, displaying days, weeks, months, and years. The calendar component supports the selection of dates and date ranges, facilitates the planning of appointments, and enables users to interact seamlessly with temporal data.

### **Live Demo**

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

### Appearance

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

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

#### Anatomy

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

The next image shows the anatomy of an [infinite calendar](#variants) and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Side navigation"},{"text":"Month view"},{"text":"Navigation highlight"},{"text":"Header with flat buttons"},{"text":"Weekdays table head"},{"text":"Calendar table"},{"text":"Scroll shadow"},{"text":"Calendar table cell"}]}'>![A Telerik and Kendo UI Calendar component](images/components-calendar-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Calendar component")</BlueprintImage>

#### Views

Depending on the user selection, the Telerik and Kendo UI Calendar 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 Calendar component views](images/components-calendar-overview-views.png "Views of a Telerik and Kendo UI Calendar component")</BlueprintImage>

#### Variants

Depending on the displayed elements, the Telerik and Kendo UI Calendar can be any of the following types:

* Infinite calendar with fast navigation
* Infinite calendar with side navigation
* Modern calendar
* Classic calendar

<BlueprintImage data='{"description":"","labels":[{"text":"Infinite calendar with fast navigation"},{"text":"Infinite calendar with side navigation"},{"text":"Modern calendar"},{"text":"Classic calendar"}]}'>![A Telerik and Kendo UI Calendar component variants](images/components-calendar-overview-variants.png "Variants of a Telerik and Kendo UI Calendar 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 Calendar","description":"Find more information about the Kendo UI for Angular Calendar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

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

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

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

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

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

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

</Wrap>