New to Kendo UI for Angular? Start a free 30-day trial

Toolbar

You can customize the toolbar of the Scheduler by using templates.

The following example demonstrates how to customize the toolbar of the Scheduler and the following sections explain the implementation steps.

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

  • dateRangeThe current DateRange of the view.
  • selectedDateThe currently selected date.
  • selectedViewThe currently selected SchedulerView view descriptor.
  • viewsAn array of SchedulerView 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:

<kendo-scheduler>
    <ng-template kendoSchedulerToolbarTemplate>
        <div kendoSchedulerToolbarNavigation></div>
        ... more components
        <div kendoSchedulerToolbarViewSelector></div>
    </ng-template>

    ...
</kendo-scheduler>

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'
        });
    }
}