New to Kendo UI for AngularStart a free 30-day trial

Calendar Options

The DateTimePicker enables you to configure its popup Calendar.

Calendar Types

The DateTimePicker 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
Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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

By default, the navigation animation is disabled.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

Week Number Column

In the Calendar, you can render a column which displays the number of the weeks within the current month view. To show the week number column, set the weekNumber property.

Change Theme
Theme
Loading ...

Week Day Format

By default the DateTimePicker calendar displays the week days in a short format. To change the format, set the weekDaysFormat property. The available options are:

  • short (default)—Displays the week days in a short format (e.g., "mo").
  • narrow—Displays the week days in a narrow format (e.g., "m").
  • abbreviated—Displays the week days in an abbreviated format (e.g., "mon").
Change Theme
Theme
Loading ...