Add a Control to the Toolbar of the Scheduler

Environment

Product	Progress® Kendo UI® Scheduler for jQuery
Operating System	All
Browser	All

Description

I want to add a DropDownList to the toolbar of the Scheduler, but unlike the Grid, it does not feature a toolbar.template API property.

How can I add a specific control to the Scheduler toolbar?

Solution

To implement the scenario, use jQuery.

<div id="scheduler"></div>

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

  var dropDown = $("<input id='products'/>");
  $(scheduler.toolbar).prepend(dropDown);

  $("#products").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
      transport: {
        read: {
          dataType: "jsonp",
          url: "https://demos.telerik.com/kendo-ui/service/Products",
        }
      }
    }
  });  
</script>

See Also

• API Reference of the Scheduler.