MultiViewCalendarComponent

Represents the Kendo UI MultiViewCalendar component for Angular.

html

<kendo-multiviewcalendar> </kendo-multiviewcalendar>

Selector

kendo-multiviewcalendar

Export Name

Accessible in templates as #kendoMultiViewCalendarInstance="kendo-multiviewcalendar"

Inputs

Name	Type	Default	Description
activeRangeEnd	SelectionRangeEnd		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	Specifies the active view that the Calendar initially renders. 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. 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	Specifies the bottommost view to which you can navigate.
disabled	boolean	false	Specifies whether the component is disabled (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 MultiViewCalendar that will be disabled (see example).
disabledDatesRangeValidation	boolean	false	Determines whether the built-in validator for disabled date ranges is enforced when validating a form (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.
footer	boolean	false	Toggles the visibility of the footer.
max	Date	2099-12-31	Specifies the maximum allowed date value
min	Date	1970-01-01	Specifies the minimum allowed date value
orientation	CalendarOrientation		Specifies the orientation of the MultiViewCalendar. The available values are: horizontal (default) vertical
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).
selectionRange	SelectionRange		Specifies the selectionRange property and defines the selection range of the component (see example). We recommend using the value property as it now supports range selection.
showOtherMonthDays	boolean	true	Shows days that fall outside the current month (see example).
showViewHeader	boolean	false	Determines whether to display a header for every view (for example, the month name).
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	Specifies the topmost view to which you can navigate.
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.
views	number	2	Specifies the views property and defines the number of rendered months.
weekDaysFormat?	WeekDaysFormat	'short'	Specifies the format of the displayed week day names.
weekNumber	boolean	false	Specifies 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).
blur	EventEmitter<any>	Fires each time the MultiViewCalendar gets blurred (see example).
cellEnter	EventEmitter<Date>	Fires when a view cell is entered (see example).
cellLeave	EventEmitter<Date>	Fires when a view cell is leaved (see example).
focus	EventEmitter<any>	Fires each time the MultiViewCalendar gets focused (see example).
navigate	EventEmitter<{ activeView: CalendarView; focusedDate: Date; }>	Fires when navigating in the currently active view (see example).
valueChange	EventEmitter<any>	Fires when the value is changed (see example).

Methods

blur
Blurs the Calendar component.

focus
Focuses the host element of the Calendar. ts @Component({ selector: 'my-app', template: ` <button (click)="multiviewcalendar.focus()">Focus calendar</button> <kendo-multiviewcalendar #multiviewcalendar></kendo-multiviewcalendar> ` }) export class AppComponent { }