CalendarComponent

Represents the Kendo UI Calendar component for Angular.

ts

@Component({
selector: 'my-app',
template: `
 <kendo-calendar></kendo-calendar>
`
})
export class AppComponent { }

Selector

kendo-calendar

Export Name

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

Inputs

Name	Type	Default	Description
activeRangeEnd	SelectionRangeEnd		Specify, 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		Defines the active view that the Calendar initially renders (see example). By default, the active view is month. 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		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		Sets the dates of the Calendar that will be disabled (see example).
focusedDate	Date		Sets or gets the focusedDate property of the Calendar and defines the focused date of the component (see example). If the Calendar is out of the min or max range, it normalizes the defined focusedDate.
footer	boolean	false	Toggles the visibility of the footer.
max	Date		Sets or gets the max property of the Calendar and defines the maximum allowed date value (see example). By default, the max value is 2099-12-31.
min	Date		Sets or gets the min property of the Calendar and defines the minimum allowed date value (see example). By default, the min value is 1900-1-1.
navigation	boolean		Sets or gets the navigation property of the Calendar and 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		Sets the Calendar selection mode (see example). The available values are: single (default) multiple range
showOtherMonthDays	boolean		Displays the days that fall out of the current month (see example). The default values per Calendar type are: infinite - false classic - true
tabindex	number		Sets or gets the tabindex property of the Calendar. Based on the HTML tabindex behavior, it determines whether the component is focusable.
topView	CalendarView		Defines the topmost view to which the user can navigate (see example).
type	CalendarType		Specifies the Calendar type. The possible values are: infinite (default) classic
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'	Sets the format of the displayed Calendar week days' names.
weekNumber	boolean		Determines whether to display a week number column in the month view (see example).

Events

Name	Type	Description
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.
navigate	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. ts @Component({ selector: 'my-app', template: ` <button (click)="calendar.focus()">Focus calendar</button> <kendo-calendar #calendar></kendo-calendar> ` }) export class AppComponent { }