Components
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListView
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltip
    • TreeList
    • TreeView
    • Uploads
    Styling & Themes
    Common Features
    Advanced Setup

CalendarComponent

Represents the Kendo UI Calendar component for Angular.

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

Selector

kendo-calendar

Export Name

Accessible in templates as #kendoCalendarInstance="kendo-calendar"

Inputs

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

boolean

Sets or gets the navigation property of the Calendar and determines whether the navigation side-bar will be displayed (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 (see example).

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 Calendar 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 (see example). 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 (see example). By default, the min value is 1900-1-1.

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

activeViewDateChange

EventEmitter<Date>

Fires when the active view date is changed (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)="calendar.focus()">Focus calendar</button>
 <kendo-calendar #calendar></kendo-calendar>
`
})
class AppComponent { }