toolbar

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

configuration

When Array of commands is passed, it accepts the "pdf" and "search" commands that the scheduler will display alongside its built-in ToolBar tools. The "pdf" and "search" tools will be rendered in a fixed place within the ToolBar that cannot be changed.

The "pdf" command exports the scheduler in PDF format. The "search" option allows searching through Scheduler events titles.

Array|Object

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  toolbar: ["pdf", "search"],
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  toolbar: [ { name: "pdf" } ],
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

When an object having an items field is used, that will entirely replace all tools in the Scheduler ToolBar (including the default ones). Hence, the developer will need to declare them manually in order make them appear in the component. The default order of the Scheduler tools is: [ "pdf", [ "today", "previous", "next" ], "current", { type: "spacer" }, "search", "views" ]. Note that if more than one view is defined, the last default tool is views, otherwise views is substituted by the refresh tool. Tools grouped in an array would produce a ButtonGroup in the ToolBar. Note that the pdfMobile and search tools should be explicitly enabled in order to be visible.

By using the items field, you can specify any kind and number of custom tools that will be rendered in the ToolBar. You should define the custom tools via the ToolBar items API.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  toolbar: {
    items: [
      ["previous", "next"],
      {
        name: "custom",
        type: "button",
        text: "Custom Button"
      },
      { type: "spacer" },
      "search",
      "views"
    ]
  },
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

toolbar.items

Array|Object

When the items field receives an array, it will entirely replace all tools in the Scheduler ToolBar (including the default once). Hence, the developer will need to declare them manually in order make them appear in the component. The default order of the Scheduler tools is: [ "pdf", [ "today", "previous", "next" ], "current", { type: "spacer" }, "search", "views" ]. Note that if more than one view is defined, the last default tool is views, otherwise views is substituted by the refresh tool. Tools grouped in an array would produce a ButtonGroup in the ToolBar. Note that the pdfMobile and search tools should be explicitly enabled in order to be visible.

By using the items field, you can specify any kind and number of custom tools that will be rendered in the ToolBar. You should define the custom tools via the ToolBar items API.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  toolbar: {
    items: [
      ["previous", "next"],
      {
        name: "custom",
        type: "button",
        text: "Custom Button"
      },
      { type: "spacer" },
      "search",
      "views"
    ]
  },
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  mobile: true,
  toolbar: {
    items: {
      desktop: [["previous", "next"], "current", "pdf", { type: "spacer" }, "search", "views"],
      mobile: {
        main: ["pdfMobile", { type: "spacer" }, "search", "viewsMobile"],
        navigation: ["previousMobile", { type: "spacer" }, "currentMobile", { type: "spacer" }, "nextMobile"]
      }
    }
  },
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

toolbar.name

String

The name of the command.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2022/6/13"),
    startTime: new Date("2022/6/13 07:00 AM"),
    height: 600,
    views: ["day", "week"],
    timezone: "Etc/UTC",
    dataSource: [
        {
            id: 1,
            start: new Date("2022/6/13 10:00 AM"),
            end: new Date("2022/6/13 11:00 AM"),
            title: "Team Meeting"
        }
    ],
    toolbar: [
        { name: "pdf" },
        { name: "today" }
    ]
});
</script>

toolbar

toolbar.items

toolbar.name

Related Members