New to Kendo UI for Angular? Start a free 30-day trial

HeaderTemplateDirective

Directive

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 header
date - The Date object representing the current header context
activeView - The current active view of the Calendar

For more examples, refer to the article on templates.

Definition

Package:@progress/kendo-angular-dateinputs

Selector:[kendoCalendarHeaderTemplate]

Syntax:

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>