New to Kendo UI for Angular? Start a free 30-day trial

Calendar Options

The DatePicker enables you to configure its popup Calendar.

Calendar Types

The DatePicker allows you to switch between the different Calendar layouts by using the calendarType input property.

By default, the Calendar type is set to infinite.

The available calendarType values are:

  • infinite (Default)
  • classic
Example
View Source
Change Theme:

Displaying Other Month Days

Based on the calendarType option the other month days are either displayed or hidden by default:

  • infinite—Hides the other month days.
  • classic—Shows the other month days.

To change the default behavior set the showOtherMonthDays property.

Example
View Source
Change Theme:

Navigation Animation

The DatePicker allows you to enable the navigation animation in the Classic Calendar by using the animateCalendarNavigation input property.

By default, the navigation animation is disabled.

Example
View Source
Change Theme:

Focused Dates

The DatePicker enables you to handle the configuration of the focused calendar dates.

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

Example
View Source
Change Theme:

Active View

To define the first view that the Calendar initially renders, use the activeView property.

The CalendarView type defines the following possible view options:

  • month—Shows the days of the month.
  • year—Shows the months of the year.
  • decade—Shows the years of the decade.
  • century—Shows the decades of the century.
Example
View Source
Change Theme:

View Selection Depth

The DatePicker enables you to control the view depth to which the user can navigate.

To determine its navigation view depth, use the bottomView property. To limit the topmost view that user can reach, use the `topView property.

Example
View Source
Change Theme:

Week Number Column

In the calendar of the DatePicker, you can render a column which displays the number of the weeks within the current month view.

To show the calendar week number column, set the weekNumber property.

Example
View Source
Change Theme: