New to Kendo UI for Angular? Start a free 30-day trial
HeaderTemplateDirective
A directive for customizing the entire header in the Calendar component.
This directive allows you to define a custom template for rendering the complete header content, including navigation controls and title. The template context provides access to the title text, current date, and active view.
Template Context Variables:
title
- The formatted title text for the headerdate
- The Date object representing the current header contextactiveView
- The current active view of the Calendar
For more examples, refer to the article on templates.
html
<kendo-calendar>
<ng-template kendoCalendarHeaderTemplate let-title let-date="date">
<div class="custom">
<span>{{title}}</span>
<small>{{date | date:'yyyy-MM-dd'}}</small>
</div>
</ng-template>
</kendo-calendar>
Selector
[kendoCalendarHeaderTemplate]