Calendar Options

The DateTimePicker enables you to configure its popup Calendar.

Calendar Type

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
View Source
Edit In Stackblitz  
Change Theme:

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.

View Source
Edit In Stackblitz  
Change Theme:

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.

    selector: 'my-app',
    template: `
export class AppComponent { }