CalendarProps

Updated on Sep 5, 2025

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.

Name	Type	Default	Description
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. jsx <Calendar ariaDescribedBy="description-id" />
ariaLabelledBy?	string		Identifies the element(s) which will label the component. jsx <Calendar ariaLabelledBy="label-id" />
bottomView?	ActiveView		Defines the bottommost view to which the user can navigate. jsx <Calendar bottomView="month" />
cell?	React.ComponentType<CalendarCellProps>		Enables the customization or the override of the default Calendar cell. (see example). jsx <Calendar cell={CustomCell} />
className?	string		Sets the className of the Calendar. jsx <Calendar className="custom-class" />
defaultActiveView?	ActiveView		Sets the default active view of the Calendar. If not set, the Calendar will display the month view. jsx <Calendar defaultActiveView="year" />
defaultValue?	"null" | Date		Sets the default value of the Calendar.
disabled?	boolean		Determines whether the Calendar is disabled. (see example). jsx <Calendar disabled={true} />
focusedDate?	Date		Sets the initial focused date of the Calendar. jsx <Calendar focusedDate={new Date()} />
header?	React.ComponentType<CalendarHeaderProps>		Enables the customization or the override of the default header in the Calendar. (see example). jsx <Calendar header={CustomHeader} />
headerTitle?	React.ComponentType<CalendarHeaderTitleProps>		Enables the customization or the override of the default header title in the Calendar. (see example). jsx <Calendar headerTitle={CustomHeaderTitle} />
id?	string		Sets the id of the Calendar. jsx <Calendar id="calendar-id" />
max?	Date		Sets the maximum allowed date of the Calendar. Defaults to 2099-12-31. (see 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). jsx <Calendar min={new Date(1900, 0, 1)} />
navigation?	boolean		Determines if the navigation sidebar will be displayed. jsx <Calendar navigation={true} />
navigationItem?	React.ComponentType<CalendarNavigationItemProps>		Enables the customization or the override of the default navigation item in the Calendar. (see example). jsx <Calendar navigationItem={CustomNavigationItem} />
onBlur?	(event: FocusEvent<any>) => void		Fires each time the Calendar is blurred. 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.
onFocus?	(event: FocusEvent<any>) => void		Fires each time the Calendar is focused. jsx <Calendar onFocus={(event) => console.log('Focus event:', event)} />
showOtherMonthDays?	boolean		Displays the days that fall out of the current month. 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. jsx <Calendar smoothScroll={false} />
tabIndex?	number		Sets the tabIndex property of the Calendar. jsx <Calendar tabIndex={0} />
topView?	ActiveView		Defines the topmost view to which the user can navigate. jsx <Calendar topView="decade" />
value?	"null" | Date		Sets the value of the Calendar.
weekCell?	React.ComponentType<CalendarWeekCellProps>		Enables the customization or the override of the default week-column cell in the Calendar. (see example). jsx <Calendar weekCell={CustomWeekCell} />
weekDaysFormat?	WeekDaysFormat	short *	Specifies the possible format options for the displayed Calendar week days' names. jsx <Calendar weekDaysFormat="short" />
weekNumber?	boolean		Determines if the week number column will be displayed. jsx <Calendar weekNumber={true} />