Calendar Customization

Updated on Nov 6, 2026

The Calendar enables you to customize the content of its cells, headers, footer, and navigation items by using templates.

To define a cell template, nest an <ng-template> tag with one of the available cell template directives inside the <kendo-calendar> 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.

Example

View Source

Loading ...

Suggested Links

• API Reference of the Calendar