New to Kendo UI for Angular? Start a free 30-day trial
Templates
The Calendar enables you to customize the content of each 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-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 themonth
view cells.kendoCalendarYearCellTemplate
—Used for rendering the content of theyear
view cells.kendoCalendarDecadeCellTemplate
—Used for rendering the content of thedecade
view cells.kendoCalendarCenturyCellTemplate
—Used for rendering the content of thecentury
view cells.kendoCalendarCellTemplate
—Equivalent to thekendoCalendarMonthCellTemplate
directive.kendoCalendarWeekNumberCellTemplate
—Used for rendering the content of theweek number
cells.kendoCalendarHeaderTitleTemplate
—Used for rendering the content of theheader title
button.kendoCalendarHeaderTemplate
—Used for fully customizing the header content of the Calendar.kendoCalendarFooterTemplate
—Used for rendering the content of the Calendar footer. Thefooter
property should be set totrue
in order to render the footer.kendoCalendarNavigationItemTemplate
—Used for rendering the content of thenavigation item
.
Change Theme
Theme
Loading ...