Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Sample Applications
    Virtual Classroom
    FAQ
    Troubleshooting
Components / Date Inputs / API / MultiViewCalendarComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

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.

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

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

orientation

CalendarOrientation

Specifies the orientation of the MultiViewCalendar.

The available values are:

  • horizontal (default)
  • vertical

rangeValidation

boolean

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

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

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[] | Day[] | (date: Date) => boolean

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

any

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 or an array of valid JavaScript Date instances when in multiple selection mode.

Events

NameTypeDescription

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

navigate

EventEmitter<{ activeView: CalendarView; focusedDate: Date; }>

Fires when navigating in the currently active view (more information and example).

valueChange

EventEmitter<any>

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 { }

In this article

Not finding the help you need?

Contact Support