Toolbar
Customize the Scheduler toolbar with templates or hide it completely to meet your application requirements.
The following example demonstrates how to customize the toolbar of the Scheduler and the following sections explain the implementation steps.
Declaring a Template
To customize the toolbar, declare an <ng-template>
and decorate it with the kendoSchedulerToolbarTemplate
directive.
<kendo-scheduler>
<ng-template kendoSchedulerToolbarTemplate>
<!-- Toolbar template content -->
</ng-template>
...
</kendo-scheduler>
Setting the Template Context
The toolbar template context includes the following variables:
dateRange
—The currentDateRange
of the view.selectedDate
—The currently selected date.selectedView
—The currently selectedSchedulerView
view descriptor.views
—An array ofSchedulerView
objects which describes the currently declared views.
You can bind the template variables to local variables by using the let-
syntax.
<kendo-scheduler>
<ng-template kendoSchedulerToolbarTemplate
let-selectedDate="selectedDate">
{{ selectedDate | date }}
</ng-template>
...
</kendo-scheduler>
Including the Built-in Components
You can add either of the following built-in navigation components to the toolbar template:
kendoSchedulerToolbarNavigation
—Renders navigation buttons, a calendar, and a date-range label.kendoSchedulerToolbarViewSelector
—Renders the buttons for selecting the view.
Using the Toolbar Service
The toolbar template can emit actions to the Scheduler by using the provided ToolbarService
. ToolbarService
provides the single navigate
method which accepts a predefined NavigationAction
type.
export class MyNavigationComponent {
constructor(public toolbarService: ToolbarService) { }
public next(): void {
this.toolbarService.navigate({
type: 'next'
});
}
}
Hiding the Toolbar
Hide the Scheduler toolbar completely by setting the showToolbar
property to false
.
<kendo-scheduler [showToolbar]="false">
<kendo-scheduler-day-view></kendo-scheduler-day-view>
<kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>
This removes the entire toolbar, including navigation controls and view selector buttons. Users must navigate the Scheduler programmatically when the toolbar is hidden.