AI Components & Features
Knowledge Base
FAQs
API Reference
Components / Date Inputs / API / CalendarProps
New to KendoReact? Start a free 30-day trial

CalendarProps

Interface

Represents the props of the KendoReact Calendar component. The generic argument is passed to the onChange property and is used as a target in the CalendarChangeEvent interface.

Definition

Package:@progress/kendo-react-dateinputs

Properties

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example, these elements could contain error or hint messages.

Example:
jsx
<Calendar ariaDescribedBy="description-id" />

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

Example:
jsx
<Calendar ariaLabelledBy="label-id" />

bottomView?

Defines the bottommost view to which the user can navigate.

Example:
jsx
<Calendar bottomView="month" />

cell?

ComponentType​<CalendarCellProps>

Enables the customization or the override of the default Calendar cell. (see example).

Example:
jsx
<Calendar cell={CustomCell} />

className?

string

Sets the className of the Calendar.

Example:
jsx
<Calendar className="custom-class" />

defaultActiveView?

Sets the default active view of the Calendar. If not set, the Calendar will display the month view.

Example:
jsx
<Calendar defaultActiveView="year" />

defaultValue?

null | Date

Sets the default value of the Calendar.

disabled?

boolean

Determines whether the Calendar is disabled. (see example).

Example:
jsx
<Calendar disabled={true} />

focusedDate?

Date

Sets the initial focused date of the Calendar.

Example:
jsx
<Calendar focusedDate={new Date()} />

header?

ComponentType​<CalendarHeaderProps>

Enables the customization or the override of the default header in the Calendar. (see example).

Example:
jsx
<Calendar header={CustomHeader} />

headerTitle?

ComponentType​<CalendarHeaderTitleProps>

Enables the customization or the override of the default header title in the Calendar. (see example).

Example:
jsx
<Calendar headerTitle={CustomHeaderTitle} />

id?

string

Sets the id of the Calendar.

Example:
jsx
<Calendar id="calendar-id" />

max?

Date

Sets the maximum allowed date of the Calendar. Defaults to 2099-12-31. (see example).

Example:
jsx
<Calendar max={new Date(2099, 11, 31)} />

min?

Date

Sets the minimum allowed date of the Calendar. Defaults to 1900-1-1. (see example).

Example:
jsx
<Calendar min={new Date(1900, 0, 1)} />

navigation?

boolean

Determines if the navigation sidebar will be displayed.

Example:
jsx
<Calendar navigation={true} />

navigationItem?

ComponentType​<CalendarNavigationItemProps>

Enables the customization or the override of the default navigation item in the Calendar. (see example).

Example:
jsx
<Calendar navigationItem={CustomNavigationItem} />

onBlur?

(event: FocusEvent​<any, Element>) => void

Fires each time the Calendar is blurred.

Parameters:eventFocusEvent​<any, Element>
Example:
jsx
<Calendar onBlur={(event) => console.log('Blur event:', event)} />

onChange?

(event: CalendarChangeEvent​<T>) => void

An event that is called after the value of the Calendar has changed.

Parameters:eventCalendarChangeEvent​<T>

onFocus?

(event: FocusEvent​<any, Element>) => void

Fires each time the Calendar is focused.

Parameters:eventFocusEvent​<any, Element>
Example:
jsx
<Calendar onFocus={(event) => console.log('Focus event:', event)} />

showOtherMonthDays?

boolean

Displays the days that fall out of the current month.

Example:
jsx
<Calendar showOtherMonthDays={true} />

smoothScroll?

boolean

Deprecated

Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17.

Example:
jsx
<Calendar smoothScroll={false} />

tabIndex?

number

Sets the tabIndex property of the Calendar.

Example:
jsx
<Calendar tabIndex={0} />

topView?

Defines the topmost view to which the user can navigate.

Example:
jsx
<Calendar topView="decade" />

value?

null | Date

Sets the value of the Calendar.

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

weekCell?

ComponentType​<CalendarWeekCellProps>

Enables the customization or the override of the default week-column cell in the Calendar. (see example).

Example:
jsx
<Calendar weekCell={CustomWeekCell} />

weekDaysFormat?

Specifies the possible format options for the displayed Calendar week days' names.

Default:

short *

Example:
jsx
<Calendar weekDaysFormat="short" />

weekNumber?

boolean

Determines if the week number column will be displayed.

Example:
jsx
<Calendar weekNumber={true} />
In this article
DefinitionPropertiesariaDescribedBy?ariaLabelledBy?bottomView?cell?className?defaultActiveView?defaultValue?disabled?focusedDate?header?headerTitle?id?max?min?navigation?navigationItem?onBlur?onChange?onFocus?showOtherMonthDays?smoothScroll?tabIndex?topView?value?webMcp?weekCell?weekDaysFormat?weekNumber?
Not finding the help you need?
Contact Support