New to Kendo UI for AngularStart 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 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]

In this article
Selector
Not finding the help you need?
Contact Support