MultiViewCalendarComponent
Represents the Kendo UI MultiViewCalendar component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-multiviewcalendar></kendo-multiviewcalendar>
`
})
export class AppComponent { }
Selector
kendo-multiviewcalendar
Export Name
Accessible in templates as #kendoMultiViewCalendarInstance="kendo-multiviewcalendar"
Inputs
activeRangeEnd
Specify, which end of the defined selection range should be marked as active.
Value will be ignored if the selection range is undefined.
activeView
Defines the active view that the Calendar initially renders
(see example).
By default, the active view is month
.
You have to set
activeView
within thetopView
-bottomView
range.
bottomView
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.
showViewHeader
boolean
Determines whether to display a header for every view (for example the month name).
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
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
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 JavaScriptDate
instance.
Events
activeViewChange
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>
`
})
export class AppComponent { }