Kendo ui 如何在鼠标上方突出显示剑道日期选择器中的一周

Kendo ui 如何在鼠标上方突出显示剑道日期选择器中的一周,kendo-ui,Kendo Ui,我希望突出显示剑道日期选择器中鼠标悬停的一周,并在选择该周的任何日期时,我希望获得一周的开始日期和结束日期。我不知道怎么做。 有人能帮我吗 提前感谢在我自己刚刚做了这件事之后,我将在这里留下痕迹,供未来的读者阅读 首先要做的是让选择看起来像是选择了一周而不是一天。要实现这一点,请使用一些CSS: .k-calendar table.k-content tr:hover td { background-color: #E3F2FD; } .k-calendar table.k-content tr

我希望突出显示剑道日期选择器中鼠标悬停的一周,并在选择该周的任何日期时,我希望获得一周的开始日期和结束日期。我不知道怎么做。 有人能帮我吗


提前感谢

在我自己刚刚做了这件事之后,我将在这里留下痕迹,供未来的读者阅读

首先要做的是让选择看起来像是选择了一周而不是一天。要实现这一点,请使用一些CSS:

.k-calendar table.k-content tr:hover td { background-color: #E3F2FD; }
.k-calendar table.k-content tr td.k-state-selected,
.k-calendar table.k-content tr td.k-state-selected ~ td { background-color: #2196F3; }
当鼠标悬停一行时,这将点亮整个星期,但仍然以不同的颜色显示选定的日期和该周的任何第二天。实现这一点的诀窍是确保选定的日期实际上始终是一周的第一天

要执行此操作(并提取周开始和周结束日期),请使用事件:

此解决方案需要使用一个库,该库已在我的项目中使用。可能还有其他方法可以做到这一点,但这一种方法非常简单

剩下的应该是一些小细节,比如将“当前日期”页脚的文本更改为“当前星期”,这对于通过事件执行来说是微不足道的:

    onChange: function (e, callback) {
            // Set the culture, since the first day of a week might be different
            moment.locale(GetCulture());

            // Get the selected date and calculate the start and end of week
            var weekStart = moment(e.sender.value()).startOf('week').toDate();
            var weekEnd = moment(weekStart).add(6, 'day').toDate();

            // Always reset the date to the start of the week (the style needs it)
            e.sender.value(weekStart);

            // Do whatever else you want here
        }
widget.one("open", function (e) {
        $('.k-footer a.k-nav-today', e.sender.dateView.popup.element).text("Current Week");
});