Kendo UI Web包含數(shù)百個(gè)創(chuàng)建HTML5 web app的必備元素，包括UI組件、數(shù)據(jù)源、驗(yàn)證、一個(gè)MVVM框架、主題、模板等。本文來看看如何配置Kendo UI Calendar。

1、創(chuàng)建新的操作方法來顯示視圖：

public ActionResult Index()
{
    return View();
}

2、添加日歷

WebForms

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

Razor

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

訪問Existing Calendar

通過jQuery.data()引用一個(gè)現(xiàn)有日歷實(shí)例，一旦建議了引用，就可以使用API來控制它的行為。

訪問現(xiàn)有日歷實(shí)例

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

處理Kendo UI Calendar事件

通過Kendo UI Calendar可以訂閱所有的事件。

WebForms -由處理程序名稱訂閱

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

Razor -由處理程序名稱訂閱

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

Razor -通過模板委托訂閱

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

>>>Kendo UI Web下載

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯(cuò)過哦>>