本節為你介紹的是 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原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>