Toolbar

Updated on Sep 29, 2026

The Telerik UI for ASP.NET MVC Scheduler component provides the means to customize it's toolbar.

Default Toolbar

The Telerik UI for ASP.NET MVC Scheduler allows you to add commands for exporting to PDF and searching through Scheduler events titles. Adding the .Pdf() and .Search() commands via the Scheduler's Toolbar() configuration will display the command alongside the built-in ToolBar tools. The pdf and search tools will be rendered in a predefined place within the ToolBar.

Razor

    @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
        .Name("scheduler")
        .Height(600)
        .Toolbar(t=>{
            t.Pdf();
            t.Search();
        })
        .Timezone("Etc/UTC")
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.TaskID);
                m.RecurrenceId(f => f.RecurrenceID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.Field(f => f.OwnerID).DefaultValue(1);
            })
            .Read("Read", "Scheduler")
            .Create("Create", "Scheduler")
            .Destroy("Destroy", "Scheduler")
            .Update("Update", "Scheduler")
        )
    )

Custom Toolbar

The Telerik UI for ASP.NET MVC Scheduler allows you to customize entirely it's Toolbar via the .Toolbar(t=>t.Custom()) configuration option.

The default order of the Scheduler tools is: [ "pdf", [ "today", "previous", "next" ], "current", { type: "spacer" }, "search", "views" ]. You can set the Items configuration to entirely replace all tools in the Scheduler ToolBar (including the default once) in order desired for them to appear in the component. Grouping tools to render a ButtonGroup in the ToolBar is also supported via the Group() configuration. Rendering custom components in the Toolbar is also supported via the CustomTool() configuration method.

The Scheduler does not provide a documented wrap option for rendering the toolbar on multiple lines. Its responsive rendering progressively hides tools as the available width decreases. The Spacer() command controls placement and does not enable wrapping. If you require a true multi-line layout, use custom styling and test it with the Scheduler's responsive rendering.

View Buttons

The built-in views toolbar command uses the current Scheduler view-selector rendering. To use individual buttons instead, omit the views command from a custom toolbar and add custom buttons to a group. Handle each button's Click() event by calling the Scheduler's view() method.

For exact visual parity with a previous release, choose the button icons for the target release and theme. Icon names are version-sensitive; for example, recent releases replace the caret-alt-* icons with their chevron-* equivalents.

Razor

    .Toolbar(t => t.Custom(c => c.Desktop(d =>
    {
        d.Group(g =>
        {
            g.CustomTool(button => button.Text("Day").Click("showDay"));
            g.CustomTool(button => button.Text("Week").Click("showWeek"));
            g.CustomTool(button => button.Text("Month").Click("showMonth"));
        });
    })))

JavaScript

function showDay() {
    $("#scheduler").getKendoScheduler().view("day");
}

function showWeek() {
    $("#scheduler").getKendoScheduler().view("week");
}

function showMonth() {
    $("#scheduler").getKendoScheduler().view("month");
}

function onViewSelect(e) {
    var views = ["day", "week", "month"];
    $("#scheduler").getKendoScheduler().view(views[e.indices[0]]);
}

Razor

    .Toolbar(t => t.Custom(c =>
        c.Items(itm => {
            itm.CustomTool(Html.Kendo().Template().AddComponent(c => c
                    .DropDownButton()
                    .Name("viewsButton")
                    .Text("Select View")
                    .Icon("chevron-down").Items(db =>
                    {
                        db.Add().Text("Day");
                        db.Add().Text("Week");
                        db.Add().Text("Timeline");
                        db.Add().Text("Month");
                        db.Add().Text("Year");
                    })
                    .Events(ev => ev.Click("viewsHandler"))
                    )
                );
            itm.CustomTool(Html.Kendo().Template().AddComponent(c => c
                .Button()
                .Name("customButton")
                .Content("Custom Button")
                .Events(ev=>ev.Click("clickHandler"))
                )
            );
            itm.Spacer();
            itm.Current();
            itm.Group(g =>
                {
                    g.Today();
                    g.Previous();
                    g.Current();
                });
            })
        )
    )

JavaScript

    <script type="text/javascript">
        function viewsHandler(e) {
            var scheduler = $("#scheduler").getKendoScheduler();
            var selectedView = e.target.text().toLowerCase()
            scheduler.view(selectedView)
        }

        function clickHandler(e) {
            alert('Custom button is clicked!!!')
        }
    </script>

Desktop Toolbar

Besides setting a custom Toolbar, the Scheduler provides the option to specify all the tools rendered in the Scheduler's ToolBar with its non-adaptive rendering. You can specify the tools via the .Toolbar(t=>t.Custom(c=>c.Desktop())) configuraiton method. If not explicitly set here, the component will render its built-in tools

Mobile Toolbar

In addition to the Desktop configuration the UI for ASP.NET MVC Scheduler provides the option to specify the tools rendered in the Scheduler ToolBar with its adaptive rendering. By default, two ToolBars are rendered when the Scheduler is in Adaptive rendering mode:

• Main (or upper) ToolBar - contains the following built-in tools: [ [ "pdfMobile", "calendar", "create" ], { type: "spacer" }, "search", "viewsMobile" ]
• Navigation (or lower) ToolBar - contains the following built-in tools: [ "previousMobile", { type: "spacer" }, "currentMobile", { type: "spacer" }, "nextMobile" ]

Both the Main and Navigation toolbars can be configured to display any of the built-in tools as well as custom tools:

Razor

.Toolbar(t => t.Custom(c =>
    c.Desktop(d =>
    {
        d.Group(g =>
        {
            g.Previous();
            g.Today();
            g.Next();
        });
        d.CustomTool(Html.Kendo().Template().AddComponent(c => c
            .DropDownButton()
            .Name("myViews")
            .Text("Select View")
            .Icon("chevron-down").Items(db =>
            {
                db.Add().Text("Day");
                db.Add().Text("Week");
                db.Add().Text("Timeline");
                db.Add().Text("Month");
                db.Add().Text("Year");
            })
            .Events(ev => ev.Click(
                @<text>
                    function(e) {
                    var scheduler = $("#scheduler").getKendoScheduler();
                    var selectedView = e.target.text().toLowerCase();
                    scheduler.view(selectedView);
                    }
                </text>))
            )
        );
        d.Current();
        d.Pdf();
        d.Spacer();
        d.Views();
    })
    .Mobile(m =>
    {
        m.Main(main =>
        {
            main.PdfMobile();
            main.Spacer();
            main.CurrentMobile();
            main.Spacer();
            main.ViewsMobile();
        });
        m.Navigation(navi =>
        {
            navi.PreviousMobile();
            navi.Spacer();
            navi.Today();
            navi.Spacer();
            navi.NextMobile();
        });
    })))