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

Toolbar.items.mobile

configuration

Will specify all tools rendered in the Scheduler ToolBar with its adaptive rendering. By default, there are two ToolBars rendered in the Scheduler in that mode:

main (or upper) ToolBar contains the following built-in tools: [ [ "pdfMobile", "calendar", "create" ], { type: "spacer" }, "search", "viewsMobile" ]. Note that if more than one view is defined, the last default tool is viewsMobile, otherwise viewsMobile 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;
navigation (or lower) ToolBar contains the following built-in tools: [ "previousMobile", { type: "spacer" }, "currentMobile", { type: "spacer" }, "nextMobile" ];

By using the items.mobile field, you can specify any kind and number of custom tools for the above two ToolBars. You should define the custom tools via the ToolBar items API.

toolbar.items.mobile

Object

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  mobile: "phone",
  toolbar: {
    items: {
      mobile: {
          main: [
            "pdfMobile",
            {
              name: "custom",
              type: "button",
              text: "Custom Button"
            },
            { type: "spacer" },
            "search",
            "viewsMobile"
          ],
          navigation: [
            "previousMobile",
            { type: "spacer" },
            {
              name: "custom2",
              type: "button",
              text: "Custom 2"
            },
            { 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>

Will specify all tools rendered in the main (upper) Scheduler ToolBar with its adaptive rendering. If not explicitly set here, the component will render its built-in tools in the following order: [ [ "pdfMobile", "calendar", "create" ], { type: "spacer" }, "search", "viewsMobile" ]. Note that if more than one view is defined, the last default tool is viewsMobile, otherwise viewsMobile 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.mobile.main field, you can specify any kind and number of custom tools for that ToolBar. You should define the custom tools via the ToolBar items API.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  mobile: "phone",
  toolbar: {
    items: {
      mobile: {
          main: [
            "pdfMobile",
            {
              name: "custom",
              type: "button",
              text: "Custom Button"
            },
            { type: "spacer" },
            "search",
            "viewsMobile"
          ],
          navigation: [ ]
      }
    }
  },
  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.mobile.navigation

Object

Will specify all tools rendered in the navigation (lower) Scheduler ToolBar with its adaptive rendering. If not explicitly set here, the component will render its built-in tools in the following order: [ "previousMobile", { type: "spacer" }, "currentMobile", { type: "spacer" }, "nextMobile" ].

By using the items.mobile.navigation field, you can specify any kind and number of custom tools for that ToolBar. You should define the custom tools via the ToolBar items API.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  mobile: "phone",
  toolbar: {
    items: {
      mobile: {
          main: [ ],
          navigation: [
            "previousMobile",
            { type: "spacer" },
            {
              name: "custom2",
              type: "button",
              text: "Custom 2"
            },
            { 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.items.mobile

toolbar.items.mobile

toolbar.items.mobile.main

toolbar.items.mobile.navigation