New to KendoReactLearn about KendoReact Free.

CalendarProps

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.

NameTypeDefaultDescription

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()} />

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)} />

boolean

Determines if the navigation sidebar will be displayed.

jsx
<Calendar navigation={true} />

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} />
Not finding the help you need?
Contact Support