New to Kendo UI for Angular? Start a free 30-day trial
HeaderTemplateDirective
Used for rendering the header of the Calendar. To define the header template, nest an <ng-template>
tag
with the kendoCalendarHeaderTemplate
directive inside the component tag. The template context is set to the
current component. To get a reference to the current title, use the let-title
directive. To provide more details about
the current title, get a reference to the current date
by using the let-date
directive or get a reference to the
current active view by using the let-activeView
directive.
For more examples, refer to the article on templates.
ts
@Component({
selector: 'my-app',
styles: ['.custom { color: red; }'],
template: `
<kendo-calendar>
<ng-template kendoCalendarHeaderTemplate let-title>
<span class="custom">{{title}}</span>
</ng-template>
</kendo-calendar>
`
})
export class AppComponent { }
Selector
[kendoCalendarHeaderTemplate]