# Calendar Customization

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`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/monthcelltemplatedirective)—Used for rendering the content of the `month` view cells.
* [`kendoCalendarYearCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/yearcelltemplatedirective)—Used for rendering the content of the `year` view cells.
* [`kendoCalendarDecadeCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/decadecelltemplatedirective)—Used for rendering the content of the `decade` view cells.
* [`kendoCalendarCenturyCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/centurycelltemplatedirective)—Used for rendering the content of the `century` view cells.
* [`kendoCalendarCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/celltemplatedirective)—Equivalent to the `kendoCalendarMonthCellTemplate` directive.
* [`kendoCalendarWeekNumberCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/weeknumbercelltemplatedirective)—Used for rendering the content of the `week number` cells.
* [`kendoCalendarHeaderTitleTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/headertitletemplatedirective)—Used for rendering the content of the `header title` button.
* [`kendoCalendarHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/headertemplatedirective)—Used for fully customizing the header content of the Calendar.
* [`kendoCalendarFooterTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/footertemplatedirective)—Used for rendering the content of the Calendar footer. The [`footer`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/calendarcomponent#footer) property should be set to `true` in order to render the footer.
* [`kendoCalendarNavigationItemTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/navigationitemtemplatedirective)—Used for rendering the content of the `navigation item`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dateinputs/calendar/templates/source.txt)

## Suggested Links

* [API Reference of the Calendar](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/calendarcomponent)