MultiViewCalendar Tag Helper Overview

The MultiViewCalendar Tag Helper 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 Core.

  2. Create a new action method which renders the view.

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

    <kendo-multiviewcalendar name="multiviewcalendar"
                             min="new DateTime(2010, 1, 1, 10, 0, 0)"
                             max="new DateTime(2010, 1, 1, 20, 0, 0)"
                             value="DateTime.Now">
    </kendo-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.

Example

    <kendo-multiviewcalendar name="multiviewcalendar" on-change="calendar_change" on-navigate="calendar_navigate">
    </kendo-multiviewcalendar>
    <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>

See Also

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