ASP.NET MVC Calendar Overview

Telerik UI for ASP.NET MVC Ninja image

The Calendar is part of Telerik UI for ASP.NET MVC, 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.

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.

Initializing the Calendar

The following example demonstrates how to define the Calendar by using the Calendar HtmlHelper.

    @(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(2020, 1, 1, 20, 0, 0)) // Set the min date of the Calendar.
        .Value(DateTime.Now) // Set the value of the Calendar.
    )

Functionality and Features

  • Date ranges—You can set a predefined selection range.
  • Day template—The Calendar enables you to customize the rendered day for the month view.
  • Week numbers
  • Selection
  • Disabled dates—The Calendar allows you to disable certain days which are not intended to be selected by the end user such as weekends, national holidays, and others.
  • Accessibility—You can take advantage of the accessibility capabilities provided by the Calendar component.

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(e) {
            // Handle the navigate event.
            var calendar = e.sender;
        }

        function calendar_change(e) {
            // Alerts the selected date with kendo.alert().
            var calendar = e.sender;
            kendo.alert(calendar.value());
        }
    </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(e) {
              // Handle the change event inline.
              console.log(e.sender.value());
            }
          </text>)
          .Navigate(@<text>
            function(e) {
              // Handle the navigate event inline.
              console.log(e.sender);
            }
            </text>)
      )
    )

Referencing Existing Instances

To reference an existing Telerik UI 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 your Telerik UI 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>

Next Steps

See Also

In this article