本节为你介绍的是 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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情