MultiViewCalendar Overview

The MultiViewCalendar is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI MultiViewCalendar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI MultiViewCalendar widget.

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

• Demo page for the MultiViewCalendar HtmlHelper

• Demo page for the MultiViewCalendar TagHelper

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.

           @(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.
           )
   

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

Functionality and Features

• Active view
• Multiple views
• Selection
• Day template
• Disable dates
• Week column
• Keyboard navigation

Events

You can subscribe to all MultiViewCalendar events.

Handling 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>

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

Handling 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>)
    )
  )

  <kendo-multiviewcalendar name="multiViewCalendar"
                           on-change='function() {
                                  //Handle the change event inline.
                           }'
                           on-navigate='function() {
                                  //Handle the navigate event inline.
                           }'>
  </kendo-multiviewcalendar>

See Also

• Basic Usage of the MultiViewCalendar HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the MultiViewCalendar TagHelper for ASP.NET Core (Demo)

• Using the API of the MultiViewCalendar HtmlHelper for ASP.NET Core (Demo)

• Server-Side API