彩票走势图

HTML5 Web app开发工具Kendo UI Web教程:如何配置Kendo UI Calendar

原创|行业资讯|编辑:郝浩|2013-10-14 11:19:24.000|阅读 4331 次

概述:Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。本文来看看如何配置Kendo UI Calendar。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。本文来看看如何配置Kendo UI Calendar。

1、创建新的操作方法来显示视图:

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()引用一个现有日历实例,一旦建议了引用,就可以使用API来控制它的行为。

访问现有日历实例

//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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP