Edit this page

Scheduler

The Scheduler HtmlHelper extension is a server-side wrapper for the Kendo UI Scheduler widget.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Scheduler.

  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.

    Example
        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.

    Example
        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.

    Example
    
            <%= 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)
            )
    

Event Handling

You can subscribe to all Scheduler events.

By Handler Name

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

Example

        <%=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>

By Template Delegate

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

Example

          @(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>);
                  })
          )

Reference

Existing Instances

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

Example
    //Put this after your Kendo UI Scheduler for ASP.NET MVC declaration.
    <script>
        $(function () {
            //Notice that the Name() of the Scheduler is used to get its client-side instance.
            var scheduler = $("#scheduler").data("kendoScheduler");
        });
    </script>

See Also