New to Kendo UI for Angular? Start a free 30-day trial
ToolbarTemplateDirective
Represents the toolbar template of the Scheduler. To define a toolbar template, nest an <ng-template kendoSchedulerToolbarTemplate>
tag inside the <kendo-scheduler>
. For more information and examples, see customizing the toolbar article.
The template context provides the following variables:
selectedDate
—The currently selected date.dateRange
—The currently selectedDateRange
.views
—An array ofSchedulerView
instances with the available views.selectedView
—The currently selectedSchedulerView
.
You can declare either of the following built-in navigation components in the toolbar template:
kendoSchedulerToolbarNavigation
—Renders navigation buttons, a calendar, and a date-range label.kendoSchedulerToolbarViewSelector
—Renders the buttons for selecting the view.
To emit navigation events, components inside the toolbar can inject the ToolbarService
.
html
<kendo-scheduler>
<ng-template kendoSchedulerToolbarTemplate let-selectedDate="selectedDate">
<div class="custom-toolbar">
<span>Selected Date: {{ selectedDate | date: 'longDate' }}</span>
<button kendoButton (click)="navigateToToday()">Today</button>
</div>
</ng-template>
</kendo-scheduler>
Selector
[kendoSchedulerToolbarTemplate]