Native Components / Date Inputs / API

CalendarProps

Represents the props of the Kendo UI for Vue Calendar component. The generic argument is passed to the change property and is used as a target in the CalendarChangeEvent interface.

activeRangeEnd? SelectionRangeEnd

Specifies which end of the defined selection range will be marked as active.

If the selection range is undefined, the value is ignored.

allowReverse? boolean

If set to true, the component skips the validation of whether the from value is after the to value.

bottomView? string

Defines the bottommost view to which the user can navigate.

cell? any

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

change? (event: CalendarChangeEvent) => void

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

className? string

Sets the className of the Calendar.

defaultActiveView? string

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

defaultValue? Date | Date[] | SelectionRange | null

Sets the default value of the Calendar.

disabled? boolean

Determines whether the Calendar is disabled.

focusedDate? Date

Sets the initial focused date of the Calendar.

headerTitle? any

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

id? string

Sets the id of the Calendar.

max? Date

Sets the maximum allowed date of the Calendar. Defaults to 2099-12-31.

min? Date

Sets the minimum allowed date of the Calendar. Defaults to 1900-1-1.

mode? CalendarMode

Sets the selection mode of the Calendar.

The available modes are:

(Default) single—Renders a single-date selection.
multiple—Renders a multiple-date selection.
range—Renders a date-range selection.

Determines if the navigation sidebar will be displayed.

navigationItem? any

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

onBlur? (event: any) => void

Fires each time the Calendar is blurred.

onFocus? (event: any) => void

Fires each time the Calendar is focused.

smoothScroll? boolean

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

tabIndex? number

Sets the tabIndex property of the Calendar.

topView? string

Defines the topmost view to which the user can navigate.

value? Date | Date[] | SelectionRange | null

Sets the value of the Calendar.

views number