Kendo UI API中文介绍五:Calendar (1)

原创|使用教程|编辑:我只采一朵|2014-05-30 10:05:25.000|阅读 1393 次

概述:本节为你介绍的是日历组件Kendo.ui.Calendar的Configuration。

相关链接:

本节为你介绍的是 Kendo.ui.Calendar,分为上下两节,本节为大家介绍的是Calendar日历组件的Configuration。

Configuration


culture | String(default: "en-US")

指定组件的语言。

示例 - 指定为德语(German)

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
culture: "de-DE"
});
</script>

dates Array

指定日期列表,并传递到month模板。

示例 - 指定日期列表

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
value: new Date(2000, 10, 1),
dates: [
new Date(2000, 10, 10, 10, 0, 0),
new Date(2000, 10, 10, 30, 0)
] //can manipulate month template depending on this array.
});
</script>

depth String

指定导航深度,下面是可以用的一些值:

"month" - shows the days of the month

"year" - shows the months of the year

"decade" - shows the years of the decade

"century" - shows the decades from the century

注意:如果开始选项比实际的深度低,那century不会被应用,所以应该同时设置开始和depth选项。

示例-设置日历的导航深度

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
depth: "year"
});
</script>

footer | String|Function

生成页脚的模板,如果为false,页脚则无法生成。

示例 - 将页脚模板定为一个函数

<div id="calendar"></div>
<script id="footer-template" type="text/x-kendo-template">
Today - #: kendo.toString(data, "d") #
</script>
<script>
$("#calendar").kendoCalendar({
footer: kendo.template($("#footer-template").html())
});
</script>

示例 - 将页脚模板定为一个字符串

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
footer: "Today - #: kendo.toString(data, 'd') #"
});
</script>

format | String(default: "MM/dd/yyyy")

示例- 设定一个日期格式

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
format: "yyyy/MM/dd"
});
</script>

max | Date(default: Date(2099, 11, 31))

指定日历可以显示的最大日期

示例-指定最大日期

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
max: new Date(2013, 0, 1) // set the max date to Jan 1st, 2013
});
</script>

min | Date(default: Date(1900, 0, 1))

指定日历上可以显示的最小日期。

示例-指定最小日期

<div id="calendar"></div>
<script>
// set the min date to Jan 1st, 2011
$("#calendar").kendoCalendar({
min: new Date(2011, 0, 1)
});
</script>

month Object

cells模板以"month" 视图显示。

month.content String

默认情况下,组件会生成相应的日期的值。

示例-指定cell模板为字符串

<div id="calendar"></div>
<script id="cell-template" type="text/x-kendo-template">
<div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
#= data.value #
</script>
<script>
$("#calendar").kendoCalendar({
month: {
content: $("#cell-template").html()
}
});
</script>

month.empty String

默认情况下,组件会生成一个空字符串。

示例-设定空cell模板为一个字符串

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
month: {
empty: '-'
}
});
</script>

start String(default: "month")

设定开始视图,下面是开始视图支持的值:

"month" - shows the days of the month

"year" - shows the months of the year

"decade" - shows the years of the decade

"century" - shows the decades from the century

示例-设定日历显示的初始化视图

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
start: "year"
});
</script>

value Date(default: null)

设定选中的日期。

示例-设定组件选中的日期值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
value: new Date(2012, 0, 1)
});
</script>
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:日历KendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


慧都网友 2014-06-30 17:25:17.000
0

不错,收藏了


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat