Angular Scheduler - SchedulerToolbarItem

The toolbar can contain the following elements as items:

• Predefined controls
  Predefined controls appear in the toolbar depending on whether a specific Scheduler feature is enabled. The following predefined controls are available:

  Control Name	Image
  dateNavigator
  viewSwitcher
  today

  If you need to customize a predefined control, add an object to the items[] array. This object must contain the control's name and properties you want to customize. If a control does not need customization, you can include its name in the toolbar.items[] array.

  jQuery

  index.js

  $(function(){
      $("#schedulerContainer").dxScheduler({
          // ...
          toolbar: {
              items: [
                  "dateNavigator",
                  "today"
              ]  
          }
      });
  });

  Angular

  app.component.html

  <dx-scheduler ... >
      <dxo-scheduler-toolbar>
          <dxi-scheduler-toolbar-item name="dateNavigator"></dxi-scheduler-toolbar-item>
          <dxi-scheduler-toolbar-item name="today"></dxi-scheduler-toolbar-item>
      </dxo-scheduler-toolbar>
  </dx-scheduler>

  Vue

  App.vue

  <template>
      <DxScheduler ... >
          <DxToolbar>
              <DxItem name="dateNavigator" />
              <DxItem name="today" />
          </DxToolbar>
      </DxScheduler>
  </template>
  <script setup lang="ts">
      import DxScheduler, { DxToolbar, DxItem } from 'devextreme-vue/scheduler';
  </script>

  React

  App.js

  import Scheduler, { Toolbar, Item } from 'devextreme-react/scheduler';
  // ...
  function App() {
      return (
          <Scheduler ... >
              <Toolbar>
                  <Item name="dateNavigator" />
                  <Item name="today" />
              </Toolbar>
          </Scheduler>
      );
  }

  IMPORTANT

  The Scheduler does not display controls missing from the items[] array. Ensure that this array includes controls for all enabled features.

  The "dateNavigator" predefined control is a ButtonGroup with three items: left arrow ('prev'), right arrow ('next'), and date interval ('dateInterval'). Define options.items following the example below to customize the order of dateNavigator components and add new buttons.

  jQuery

  index.js

  const customButton = {
      text: "Custom Button",
      icon: "plus",
      onClick: () => {
          console.log("The Custom Button was clicked.")
      }
  }
  
  const dateNavigatorOptions = {
      items: ['prev', 'dateInterval', customButton, 'next']
  }
  
  $(function(){
      $("#schedulerContainer").dxScheduler({
          // ...
          toolbar: {
              items: [{
                  name: "dateNavigator",      
                  options: dateNavigatorOptions
              }]  
          }
      });
  });

  Angular

  app.component.html

  app.component.ts

  <dx-scheduler ... >
      <dxo-scheduler-toolbar>
          <dxi-scheduler-toolbar-item 
              name="dateNavigator"
              [options]="dateNavigatorOptions">
          </dxi-scheduler-toolbar-item>
      </dxo-scheduler-toolbar>
  </dx-scheduler>

  import { DxSchedulerModule } from 'devextreme-angular'
  // ...
  export class AppComponent {
      customButton = {
          text: "Custom Button",
          icon: "plus",
          onClick: () => {
              console.log("The Custom Button was clicked.")
          }
      }
      dateNavigatorOptions = {
          items: ['prev', 'dateInterval', this.customButton, 'next']
      }
  }

  Vue

  App.vue

  <template>
      <DxScheduler ... >
          <DxToolbar>
              <DxItem
                  name="dateNavigator"
                  :options="dateNavigatorOptions"
              />
          </DxToolbar>
      </DxScheduler>
  </template>
  <script setup lang="ts">
      import DxScheduler, { type DxSchedulerTypes, DxToolbar, DxItem } from 'devextreme-vue/scheduler';
      const customButton = {
          text: "Custom Button",
          icon: "plus",
          onClick: () => {
              console.log("The Custom Button was clicked.");
          }
      }
      const dateNavigatorOptions: DateNavigatorItemProperties = {
          items: ['prev', 'dateInterval', customButton, 'next']
      }
  </script>

  React

  App.js

  import Scheduler, { Toolbar, Item } from 'devextreme-react/scheduler';
  // ...
  const customButton = {
      text: "Custom Button",
      icon: "plus",
      onClick: () => {
          console.log("The Custom Button was clicked.")
      }
  }
  
  const dateNavigatorOptions = {items: ['prev', 'dateInterval', customButton, 'next']};
  
  function App() {
      return (
          <Scheduler ... >
              <Toolbar>
                  <Item
                      name="dateNavigator"
                      options={dateNavigatorOptions}
                  />
              </Toolbar>
          </Scheduler>
      );
  }

• DevExtreme components

  jQuery

  You can use DevExtreme components as toolbar items. Set the widget property to specify the component you want to use and configure the component's options:

  index.js

  $(function(){
      $("#schedulerContainer").dxScheduler({
          // ...
          toolbar: {
              items: [{
                  widget: "dxSelectBox",
                  options: {
                      // SelectBox properties are specified here
                  }
              }]  
          }
      });
  });

  Angular

  You can use DevExtreme components as toolbar items. Declare a dxi-item element to add a supported component:

  app.component.html

  <dx-scheduler ... >
      <dxo-scheduler-toolbar>
          <dxi-scheduler-toolbar-item>
              <dx-select-box>
                  <!-- SelectBox properties are specified here -->
              </dx-select-box>
          </dxi-scheduler-toolbar-item>
      </dxo-scheduler-toolbar>
  </dx-scheduler>

  Vue

  You can use DevExtreme components as toolbar items. Declare a DxItem element to add a supported component:

  App.vue

  <template>
      <DxScheduler ... >
          <DxToolbar>
              <DxItem>
                  <DxSelectBox>
                      <!-- SelectBox properties are specified here -->
                  </DxSelectBox>
              </DxItem>
          </DxToolbar>
      </DxScheduler>
  </template>
  <script>
  import { DxScheduler, DxToolbar, DxItem } from 'devextreme-vue/scheduler';
  import { DxSelectBox } from 'devextreme-vue/select-box';
  
  export default {
      components: {
          DxScheduler, 
          DxToolbar, 
          DxItem,
          DxSelectBox
      }
  };
  </script>

  React

  You can use DevExtreme components as toolbar items. Declare an Item element to add a supported component:

  App.js

  import { SelectBox } from 'devextreme-react/select-box';
  import Scheduler, { Toolbar, Item } from 'devextreme-react/scheduler';
  // ...
  function App() {
      return (
          <Scheduler ... >
              <Toolbar>
                  <Item>
                      <SelectBox>
                          {/* SelectBox properties are specified here */}
                      </SelectBox>
                  </Item>
              </Toolbar>
          </Scheduler>
      );
  }

• Custom controls
  To use a custom control, specify a template for it.

The Scheduler component evaluates the html property's value. This evaluation, however, makes the Scheduler potentially vulnerable to XSS attacks. To guard against these attacks, encode the HTML markup before you assign it to the html property. Refer to the following help topic for more information: Potentially Vulnerable API - html.

You can use the text property as a safe alternative.

The following types of the specified value are available.

• Assign a string containing the name of the required template.
• Assign a jQuery object of the template's container.
• Assign a DOM Node of the template's container.
• Assign a function that returns the jQuery object or a DOM Node of the template's container.

$(function() {
    $("#toolbar").dxToolbar({
        items: [{
            // ...
            menuItemTemplate (data, index) {
                return $(`<div><i class='dx-icon-favorites'></i>${data.options.text}</div>`);
            }
        }],
    });
});

<dx-toolbar>
    <dxi-item ... 
        menuItemTemplate="menu-item"
    >
    </dxi-item>
    <div *dxTemplate="let data of 'menu-item'">
        <i class="dx-icon-favorites"></i> {{data.options.text}}
    </div>
</dx-toolbar>

<template>
    <DxToolbar>
        <dxItem ... 
            menu-item-template="menu-item"
        >
        </dxItem>
        <template #menu-item="{ data }">
            <i class="dx-icon-favorites"></i> {{data.options.text}}
        </template>
    </DxToolbar>
</template>

<script>
// ...
</script>

import React from 'react';
import Toolbar, { Item } from 'devextreme-react/toolbar';

const renderMenuItem = (data) => {
    return <div><i class="dx-icon-favorites"></i> {data.options.text}</div>;
}

function App() {
    return (
        <Toolbar>
            <Item ... 
                menuItemRender={renderMenuItem}
            >
            </Item>
        </Toolbar>
    );
}

export default App;

See Also

• Custom Templates

See Also

• toolbar.items

The text should be specified in the options configuration object.

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        items: [
            {
                // ...
                template: '<div>Custom Item</div>'
            }
        ]
    });
});

<dx-scheduler ... >
    <dxi-item ... >
        <div *dxTemplate>
            <div>Custom Item</div>
        </div>
    </dxi-item>
</dx-scheduler>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxScheduler ... >
        <dxItem ... >
            <div>Custom Item</div>
        </dxItem>
    </DxScheduler>
</template>

<script>

import DxScheduler, {
    DxItem
} from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler,
        DxItem
    },
    // ...
}
</script>

import React from 'react';

import Scheduler, {
    Item
} from 'devextreme-react/scheduler';

const renderCustomItem = () => {
    return <div>Custom Item</div>;
}

const App() = () => {
    return (
        <Scheduler ... >
            <Item ...
                render={renderCustomItem}
            >
            </Item>
        </Scheduler>
    );
}
export default App;

See Also

• Custom Templates

If you use both this property and a template, the template overrides the text.

See Also

• Create a Toolbar and its Items