如何突出顯示kendo datepicker在鼠標懸停的一週

Question

我想突出顯示關於kendo datepicker中鼠標懸停的一週以及該周的任何日期的選擇，我希望獲取周開始日期和結束日期。我不知道該怎麼做。 任何人都可以幫助我嗎？

在此先感謝

Answer 1

已經完成後正好做到了這一點我自己，我會在這裏留下痕跡爲未來的讀者。

首先要做的是讓選擇看起來像是選擇一週而不是一天。爲了實現這一點，使用了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; } 

，當鼠標懸停行這將點亮所有的一週，但仍顯示所選的一天，任一下列一天，一週以不同的顏色。做這項工作的訣竅是確保選定的一天實際上始終是一週中的第一天。

要做到這一點（和提取周開始和周結束日期），使用change事件：

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 
     } 

這種解決方案需要使用的moment.js，這是已在使用中我的項目庫。還有其他的方法可以做到這一點，但這個很簡單。

所有剩下的應該是次要的細節，如改變「當前日」頁腳文本閱讀「當前周」，這是微不足道的通過open事件做：

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