入门指南

---

立即下载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. 创建一个空div元素

首先创建一个空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;
}
}
});