快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

HTML5Webapp开发工具KendoUIWeb教程:如何配置KendoUICalendar

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

我们提供的服务有:成都网站设计、网站建设、微信公众号开发、网站优化、网站认证、永兴ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的永兴网站制作公司

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

处理Kendo UI Calendar事件

通过Kendo UI Calendar可以订阅所有的事件。

WebForms -由处理程序名称订阅

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

Razor -由处理程序名称订阅

@(Html.Kendo().Calendar()
  .Name("calendar")
  .Events(e => e
        .Change("calendar_change")
        .Navigate("calendar_navigate")
  )
)

Razor -通过模板委托订阅

@(Html.Kendo().Calendar()
  .Name("calendar")
  .Events(e => e
      .Change(@
        function() {
            //Handle the change event inline
        }
      )
      .Navigate(@
        function() {
            //Handle the navigate event inline
        }
        )
  )

点击下载Kendo UI Web


分享名称:HTML5Webapp开发工具KendoUIWeb教程:如何配置KendoUICalendar
文章网址:http://6mz.cn/article/pdohdo.html

其他资讯