Calendar HtmlHelper Overview

The Telerik UI Calendar HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Calendar widget.

The Calendar renders a graphical calendar that provides navigation and selection functionalities.

Basic Configuration

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

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

Events

You can subscribe to all Calendar events. For a complete example on basic Calendar events, refer to the demo on using the events of the Calendar.

Handling by Handler Name

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

    <%: Html.Kendo().Calendar()
        .Name("calendar")
        .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().Calendar()
        .Name("calendar")
        .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>

Handling by Template Delegate

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

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

Referencing Existing Instances

To reference an existing Calendar instance, use the jQuery.data() configuration option. Once a reference is established, use the Calendar client-side API to control its behavior.

// Place the following after the Calendar for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the Calendar is used to get its client-side instance.
        var calendar = $("#calendar").data("kendoCalendar");
    });
</script>

See Also

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