入門指南

---

立即下載Kendo UI for jQuery

本指南演示了如何啟動和運行Kendo UI for jQuery Calendar。

完成本指南后，您將獲得以下最終結果：

<div id="calendar"></div>

<script>
$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true,
month: {
content: ({ value }) => {
if(value > 20) {
return `<div class='k-bg-primary k-rounded-md k-text-white'>${value}</div>`;
}
return value;
}
}
});
</script>

1. 創(chuàng)建一個空div元素

首先創(chuàng)建一個空div元素，組件將從該元素初始化。

<div id="calendar"></div>

2. 初始化Calendar

在這一步中，您將從空的<div>元素初始化Calendar組件。

$("#Calendar").kendoCalendar({
});

3.啟用選擇

您可以通過將Calendar的selectable屬性設置為true來啟用選擇功能。

$("#calendar").kendoCalendar({
selectable: true
});

4. 啟用周數

可以通過將Calendar的weekNumber屬性設置為true來啟用周列。

$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true
});

5. 配置月份模板

您可以使用月份配置來更改日期的外觀。

$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true,
month: {
content: ({ value }) => {
if(value > 20) {
return `<div class='k-bg-primary k-rounded-md k-text-white'>${value}</div>`;
}
return value;
}
}
});