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 selected DateRange.
• views—An array of SchedulerView instances with the available views.
• selectedView—The currently selected SchedulerView.

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]