HTML Helper Basics of Kendo UI for ASP.NET MVC Beta

Calendar HTML Helper (ASPX)

<%: Html.Kendo().Calendar()
	.Name("calendar")
%>

Calendar HTML Helper (Razor)

@(Html.Kendo().Calendar()
	.Name("calendar")
)

Calendar HTML Helper with Event (ASPX)

<%: Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e.Change("change"))
%>

<script>
	function change() {
		// handle the date change event here...
	}
</script>

Calendar HTML Helper with Event (Razor)

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e.Change("change"))
)

<script>
	function change() {
		// handle the date change event here...
	}
</script>

Calendar HTML Helper with Templated Razor Delegate

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e
		.Change(@<text>
			function() {
				/// handle the date change event here...
			}
		</text>)
	)
)

Calendar HTML Helper with Value Configuration (ASPX)

<%: Html.Kendo().Calendar()
	.Name("calendar")
	.Value(DateTime.Today)
%>

Calendar HTML Helper with Value Configuration (Razor)

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Value(DateTime.Today)
)

Generated Output from Calendar HTML Helper

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({});});
</script>

Generated Output from Calendar HTML Helper with Configuration

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({value:new Date(2012,5,7,0,0,0,0)});});
</script>

Generated Output from Calendar HTML Helper with Event

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({change:change});});
</script>

<script>
	function change() {
		// handle the date change event here...
	}
</script>