Scheduler HtmlHelper Overview

The Telerik UI Scheduler HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Scheduler widget.

The Scheduler displays a set of events, appointments, or tasks. It supports the display of scheduled events in different views—single days, whole weeks, or months, or as a list of tasks which need to be accomplished.

As of the R1 2017 release, exceptions are no longer automatically removed when the user edits a series. Changes that are made to specific occurrences are persisted during series editing. If a series contains an exception, the Scheduler renders a Reset Series button within the Edit dialog of the series which allows the user to reset the series by removing existing exceptions.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which inherits the ISchedulerEvent interface.

    public class Projection : ISchedulerEvent
    {
        public string Title { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string Recurrence { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
    }
    
  3. Create a new action method which passes the List of projections to the view.

    public ActionResult Index()
    {
        List<Projection> cinemaSchedule = new List<Projection> {
            new Projection {
                Title = "Fast and furious 6",
                Start = new DateTime(2013,6,13,17,00,00),
                End= new DateTime(2013,6,13,18,30,00)
            },
            new Projection {
                Title= "The Internship",
                Start= new DateTime(2013,6,13,14,00,00),
                End= new DateTime(2013,6,13,15,30,00)
            },
            new Projection {
                Title = "The Perks of Being a Wallflower",
                Start =  new DateTime(2013,6,13,16,00,00),
                End =  new DateTime(2013,6,13,17,30,00)
            }};
    
        return View(cinemaSchedule);
    }
    
  4. Add a Scheduler.

        <%= Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
            .Name("scheduler")
            .Date(new DateTime(2013, 6, 13))
            .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
            .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
            .Editable(false)
            .Height(600)
            .BindTo(Model)
        %>
    
        @(Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
            .Name("scheduler")
            .Date(new DateTime(2013, 6, 13))
            .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
            .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
            .Editable(false)
            .Height(600)
            .BindTo(Model)
        )
    

Functionality and Features

Events

You can subscribe to all Scheduler events. For a complete example on basic Scheduler events, refer to the demo on using the events of the Scheduler. For a runnable example on the move and resize events, refer to the demo on the specific events.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    <%=Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
        .Name("scheduler")
        .Date(new DateTime(2013, 6, 13))
        .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
        .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
        .Editable(false)
        .Height(600)
        .BindTo(Model)
        .Events(e =>
        {
            e.DataBound("scheduler_dataBound");
            e.DataBinding("scheduler_dataBinding");
        })
    %>

    <script>
        function scheduler_dataBound(e) {
            // Handle the dataBound event.
        }

        function scheduler_dataBinding(e) {
            // Handle the dataBinding event.
        }
    </script>
    @(Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
        .Name("scheduler")
        .Date(new DateTime(2013, 6, 13))
        .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
        .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
        .Editable(false)
        .Height(600)
        .BindTo(Model)
        .Events(e => {
            e.DataBound("scheduler_dataBound");
            e.DataBinding("scheduler_dataBinding");
        })
    )

    <script>
        function scheduler_dataBound(e) {
            // Handle the dataBound event.
        }

        function scheduler_dataBinding(e) {
            // Handle the dataBinding event.
        }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Projection>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
    .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
    .Editable(false)
    .Height(600)
    .BindTo(Model)
    .Events(e => {
        e.DataBound(@<text>
            function (e) {
                // Handle the dataBound event.
            }
        </text>);
        e.DataBinding(@<text>
            function (e) {
                // Handle the dataBinding event.
            }
        </text>);
    })
)

Referencing Existing Instances

To reference an existing Scheduler instance, use the jQuery.data() configuration option. Once a reference is established, use the Scheduler client-side API to control its behavior.

// Place the following after the Scheduler for ASP.NET MVC declaration.
<script>
    $(function () {
        // The Name() of the Scheduler is used to get its client-side instance.
        var scheduler = $("#scheduler").data("kendoScheduler");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article