Templates

The DatePicker enables you to customize the content of each calendar cell by using cell templates.

To define a cell template, nest an <ng-template> tag with one of the available cell template directives inside the <kendo-datepicker> selector. The template context is set to the current Calendar component. To get a reference to the current date, use the let-date directive.

The available cell template directives are:

• kendoCalendarMonthCellTemplate—Used for rendering the content of the month view cells.
• kendoCalendarYearCellTemplate—Used for rendering the content of the year view cells.
• kendoCalendarDecadeCellTemplate—Used for rendering the content of the decade view cells.
• kendoCalendarCenturyCellTemplate—Used for rendering the content of the century view cells.
• kendoCalendarCellTemplate—Equivalent to the kendoCalendarMonthCellTemplate directive.
• kendoCalendarWeekNumberCellTemplate—Used for rendering the content of the week number cells.
• kendoCalendarHeaderTitleTemplate—Used for rendering the content of the header title button.
• kendoCalendarHeaderTemplate—Used for fully customizing the header content of the Calendar.
• kendoCalendarFooterTemplate—Used for rendering the content of the Calendar footer. The footer property should be set to true in order to render the footer.
• kendoCalendarNavigationItemTemplate—Used for rendering the content of the navigation item.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the DatePicker