MultiViewCalendar HtmlHelper Overview

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

Configuration

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

  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 renders the view.

        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a MultiViewCalendar.


        <%: Html.Kendo().MultiViewCalendar()
            .Name("MultiViewCalendar") // The name of the MultiViewCalendar is mandatory. It specifies the "id" attribute of the widget.
            .Min(new DateTime(2010, 1, 1, 10, 0, 0)) // Set the min time of the MultiViewCalendar.
            .Max(new DateTime(2010, 1, 1, 20, 0, 0)) // Set the min date of the MultiViewCalendar.
            .Value(DateTime.Now) // Set the value of the MultiViewCalendar.
        %>

        @(Html.Kendo().MultiViewCalendar()
            .Name("MultiViewCalendar") // The name of the MultiViewCalendar is mandatory. It specifies the "id" attribute of the widget.
            .Min(new DateTime(2010, 1, 1, 10, 0, 0)) // Set the min time of the MultiViewCalendar.
            .Max(new DateTime(2010, 1, 1, 20, 0, 0)) // Set the min date of the MultiViewCalendar.
            .Value(DateTime.Now) // Set the value of the MultiViewCalendar.
        )

Functionality and Features

Event Handling

You can subscribe to all MultiViewCalendar events.

By Handler Name

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


        <%: Html.Kendo().MultiViewCalendar()
            .Name("MultiViewCalendar")
            .Events(e => e
                .Change("calendar_change")
                .Navigate("calendar_navigate")
            )
        %>
        <script>
        function calendar_navigate() {
            // Handle the navigate event.
        }

        function calendar_change() {
            // Handle the change event.
        }
        </script>

        @(Html.Kendo().MultiViewCalendar()
          .Name("MultiViewCalendar")
          .Events(e => e
                .Change("calendar_change")
                .Navigate("calendar_navigate")
          )
        )
        <script>
        function calendar_navigate() {
            // Handle the navigate event.
        }

        function calendar_change() {
            // Handle the change event.
        }
        </script>

By Template Delegate

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


        @(Html.Kendo().MultiViewCalendar()
          .Name("MultiViewCalendar")
          .Events(e => e
              .Change(@<text>
                function() {
                    // Handle the change event inline.
                }
              </text>)
              .Navigate(@<text>
                function() {
                    // Handle the navigate event inline.
                }
                </text>)
          )
        )

See Also

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