Telerik Extensions for ASP.NET MVC
Contents

This topic shows how to use Telerik Calendar for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the calendar).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

Calendar definition

The Calendar is a component, which renders calendar in "month" view.

The calendar has four views:

  • Month view : here are rendered all days of the current selected month.
  • Year view : here are rendered months of the selected year
  • Decade view : here are rendered the years of the selected decade.
  • Century view : here are rendered the years of the selected century.

Here is how to define a simple calendar:

CopyView
<%= Html.Telerik().Calendar()
       .Name("Calendar1")
%>

<% Html.Telerik().Calendar()
       .Name("Calendar2").Render();
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the calendar which is later output as the id HTML attribute and used by Telerik UI. Setting the name is mandatory and exception would be thrown otherwise.
  • Finally the Render method outputs the HTML of the calendar.
    Important
    The Render method must be called if the calendar declaration is in a code block starting with no "=" or ":" sign. Otherwise, the component will not output any HTML.
  • Datepicker will be created with default values for the MinDate(DateTime) and MaxDate(DateTime), which are respectively 31/12/1899 and 1/1/1900. Date format is set to ShortDatePattern.

Here is the result of the aforementioned code:

See Also