MultiViewCalendarComponent
Represents the Kendo UI MultiViewCalendar component for Angular.
Definition
Package:@progress/kendo-angular-dateinputs
Selector:kendo-multiviewcalendar
Export Name:Accessible in templates as #kendo-multiviewcalendarInstance="kendo-multiviewcalendar"
Syntax:
<kendo-multiviewcalendar> </kendo-multiviewcalendar>
Inputs
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'.
Specifies the active view that the Calendar initially renders.
By default, the active view is month.
You have to set
activeViewwithin thetopView-bottomViewrange.
allowReverse
boolean
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.
false
animateNavigation
boolean
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-jspolyfill.
false
Specifies the bottommost view to which you can navigate.
disabled
boolean
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.
false
disabledDates
Date[] | Day[] | (date: Date) => boolean
Specifies the dates of the MultiViewCalendar that will be disabled (see example).
disabledDatesRangeValidation
boolean
Determines whether the built-in validator for disabled date ranges is enforced when validating a form (see example).
false
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
Toggles the visibility of the footer.
false
max
Date
Specifies the maximum allowed date value
2099-12-31
min
Date
Specifies the minimum allowed date value
1970-01-01
Specifies the orientation of the MultiViewCalendar.
The available values are:
horizontal(default)vertical
'horizontal'
rangeValidation
boolean
Determines whether the built-in min or max validators are enforced when validating a form.
false
Sets the Calendar selection mode (see example).
'single'
Specifies the selectionRange property and
defines the selection range of the component
(see example).
We recommend using the
valueproperty as it now supportsrangeselection.
showOtherMonthDays
boolean
Shows days that fall outside the current month (see example).
true
showViewHeader
boolean
Determines whether to display a header for every view (for example, the month name).
false
tabindex
number
Specifies the tabindex property of the Calendar. Based on the
HTML tabindex behavior,
it determines whether the component is focusable.
0
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
valuehas to be a valid JavaScriptDateinstance when insingleselection mode, an array of valid JavaScript Date instances when inmultipleselection mode, or an object of typeSelectionRangewhen inrangeselection mode.
views
number
Specifies the views property and
defines the number of rendered months.
2
Specifies the format of the displayed week day names.
"short"
weekNumber
boolean
Specifies whether to display a week number column in the month view
(see example).
false
Events
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).