MultiViewCalendar TagHelper Overview

The Telerik UI MultiViewCalendar TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI MultiViewCalendar widget.

The MultiViewCalendar renders a graphical Gregorian calendar with multiple horizontal views.

Initializing the 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.

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

    
        <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

Events

You can subscribe to all MultiViewCalendar events.

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


    <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