MultiViewCalendarComponent

Represents the Kendo UI MultiViewCalendar component for Angular.

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

Selector

kendo-multiviewcalendar

Export Name

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

Inputs

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.

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.

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).

disabledDatesRangeValidation boolean

Determines whether the built-in validator for disabled
date ranges is enforced when validating a form
(see example).

rangeValidation boolean

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

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.

views number

Sets or gets the views property of the Calendar and
defines the number of rendered months.

weekNumber boolean

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

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

Sets the dates of the MultiViewCalendar 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.

max Date

Sets or gets the max property of the Calendar and
defines the maximum allowed date value.
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.
By default, the min value is 1900-1-1.

selectionRange SelectionRange

Sets or gets the selectionRange property of the Calendar and
defines the selection range of the component
(see example).

value Date

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.

Events

activeViewChange EventEmitter<CalendarView>

Fires when the active view is changed
(more information and example).

cellEnter EventEmitter<Date>

Fires when a view cell is entered
(more information and example).

cellLeave EventEmitter<Date>

Fires when a view cell is leaved
(more information and example).

valueChange EventEmitter<Date>

Fires when the value is changed
(more information and example).

Methods

blur

Blurs the Calendar component.

focus

Focuses the host element of the Calendar.

@Component({
selector: 'my-app',
template: `
 <button (click)="multiviewcalendar.focus()">Focus calendar</button>
 <kendo-multiviewcalendar #multiviewcalendar></kendo-multiviewcalendar>
`
})
class AppComponent { }