New to Kendo UI for AngularStart a free 30-day trial

CalendarComponent

Represents the Kendo UI Calendar component for Angular.

html
<kendo-calendar></kendo-calendar>

Selector

kendo-calendar

Export Name

Accessible in templates as #kendoCalendarInstance="kendo-calendar"

Inputs

NameTypeDefaultDescription

activeRangeEnd

SelectionRangeEnd

'start'

Specifies which end of the defined selection range should be marked as active. Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.

activeView

CalendarView

'month'

Defines the active view that the Calendar initially renders (see example). You have to set activeView within the topView-bottomView range.

allowReverse

boolean

false

Allows reverse selection when using range selection. If allowReverse is set to true, the component skips the validation of whether the start date is after the end date.

animateNavigation

boolean

false

Determines whether to enable animation when navigating to previous/next view. Applies to the classic Calendar only.

This feature uses the Web Animations API. In order to run the animation in browsers that do not support it, you need the web-animations-js polyfill.

bottomView

CalendarView

'month'

Defines the bottommost view to which the user can navigate (see example).

disabled

boolean

Sets or gets the disabled property of the Calendar and determines whether the component is active (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.

disabledDates

Date[] | Day[] | (date: Date) => boolean

Specifies the dates of the Calendar that will be disabled (see example).

focusedDate

Date

Specifies the focused date of the Calendar (see example).

If the Calendar is outside the min or max range, the component normalizes the defined focusedDate.

boolean

false

Toggles the visibility of the footer.

max

Date

2099-12-31

Specifies the maximum allowed date value (see example).

min

Date

1900-1-1

Specifies the minimum allowed date value (see example).

boolean

true

Determines whether the navigation side-bar will be displayed (see example). Applies to the infinite Calendar only.

rangeValidation

boolean

false

Determines whether the built-in min or max validators are enforced when validating a form.

selection

CalendarSelection

'single'

Sets the Calendar selection mode (see example).

showOtherMonthDays

boolean

Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic (see example).

tabindex

number

0

Specifies the tabindex property of the Calendar. Based on the HTML tabindex behavior, it determines whether the component is focusable.

topView

CalendarView

'century'

Defines the topmost view to which the user can navigate (see example).

type

CalendarType

'infinite'

Specifies the Calendar type.

value

Date | Date[] | SelectionRange

Sets or gets the value property of the Calendar and defines the selected value of the component.

The value has to be a valid JavaScript Date instance when in single selection mode, an array of valid JavaScript Date instances when in multiple selection mode, or an object of type SelectionRange when in range selection mode.

weekDaysFormat?

WeekDaysFormat

'short'

Specifies the format of the displayed week day names.

weekNumber

boolean

false

Determines whether to display a week number column in the month view (see example).

Events

NameTypeDescription

activeViewChange

EventEmitter<CalendarView>

Fires when the active view is changed (see example).

activeViewDateChange

EventEmitter<Date>

Fires when the active view date is changed (see example). Applies to the infinite Calendar only.

EventEmitter<{ activeView: CalendarView; focusedDate: Date; }>

Fires when navigating in the currently active view (see example).

blur

EventEmitter<any>

Fires each time the Calendar gets blurred (see example).

focus

EventEmitter<any>

Fires each time the Calendar gets focused (see example).

valueChange

EventEmitter<any>

Fires when the value is changed (see example).

Methods

blur

Blurs the Calendar component.

focus

Focuses the Calendar by making the table.k-calendar-table element active.

In this article
SelectorExport NameInputsEventsMethods
Not finding the help you need?
Contact Support