Kendo UI/JQuery日历模板失效及语法疑问，求动态配置方法

我正在尝试给Kendo UI for jQuery的日历添加自定义样式，但自定义视觉效果未正常显示，同时对官方示例中的几个语法存在疑问，另外想了解如何动态设置模板给特定日期加样式。

疑问点 #

1. 模板代码中+data.date的+作用是什么？是否必需？ #

官方示例代码片段：

month: {
      // template for dates in month view
      content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +

2. 测试数据中+new Date(...)的+用途是什么？ #

官方示例代码片段：

var today = new Date(),
    events = [
        +new Date(today.getFullYear(), today.getMonth(), 8),

3. 如何在视图加载后通过JavaScript动态实例化模板，为特定日期设置不同样式？ #

我的实现代码 #

Razor 代码 #

<div>
    @(Html.Kendo().Calendar()
        .Name("CalendarName")
        .Selectable("multiple"))
</div>

后续JavaScript配置 #

kendoCalendar.setOptions({
    selectable: "multiple",
    disableDates: jsArrayWhichContainsDateObjects,
    dates: dateArray,
    month: {
        content: '# if ($.inArray(data.date, data.dates) != -1) { #' 
    }
});

解答 #

关于+符号的作用 #

这两个场景里的+都是把Date对象转换为数字类型的时间戳的简写方式：

• +new Date(...)会直接将创建的Date对象转为对应的Unix时间戳（毫秒数），存进数组里。
• +data.date是把模板上下文里的Date类型data.date转为时间戳数字。

原因是$.inArray使用严格相等（===）进行匹配，如果数组里存的是时间戳数字，而data.date是Date对象，直接比较会因为类型不同匹配失败。所以必须用+统一类型，确保匹配逻辑生效。

是否必需？取决于你的dates数组存储的类型：

• 如果数组里是时间戳数字，模板里必须加+data.date；
• 如果数组里是Date对象，模板里不需要加，但要注意$.inArray比较对象是比较引用，必须是同一个Date实例才会匹配，所以更推荐统一转成时间戳避免问题。

动态设置模板实现自定义样式 #

你的现有代码存在模板不完整的问题，导致视觉异常，完整实现步骤如下：

1. 统一数据类型：确保dateArray里存储的是时间戳数字（和模板里的+data.date匹配）。
2. 编写完整模板：在模板中为匹配的日期添加自定义CSS类，同时保留默认日期的输出：

// 先获取日历实例
var kendoCalendar = $("#CalendarName").data("kendoCalendar");

// 动态更新配置
kendoCalendar.setOptions({
    selectable: "multiple",
    disableDates: jsArrayWhichContainsDateObjects,
    dates: dateArray, // 确保这里是时间戳数组
    month: {
        content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                 '<div class="highlight-date">#= data.value #</div>' +
                 '# } else { #' +
                 '<div>#= data.value #</div>' +
                 '# } #'
    }
});

3. 添加自定义CSS样式：

.highlight-date {
    background-color: #2196F3;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
}

4. 注意事项：调用setOptions后，日历会自动重新渲染，确保dateArray数据已经准备就绪再执行该方法。

内容的提问来源于stack exchange，提问作者Bruce Wayne