有沒有辦法在月視圖中向Kendo計劃程序添加'X more events'風格的消息？

Question

我在Kendo UI版本中使用ASP.NET MVC：「2014.2.716」。

有沒有辦法在Kendo Scheduler控件中將默認的'...'更改爲帶有'13 more events'的自定義消息？

這是我到目前爲止已經試過。我知道我可以捕獲綁定事件的數據...

@(Html.Kendo().Scheduler<MyViewModel>() 
     .Name("myScheduler") 
     .Selectable(true) 
     .EventTemplateId("event-template") 
     .Events(e => 
     { 
      e.DataBound("calDataBound"); 
     }) 
     .Views(views => 
     { 
      views.DayView(); 
      views.WeekView(); 
      views.MonthView(); 
      views.AgendaView(); 
     }) 
     @* Other markup removed for brevity ... *@ 

...然後在JavaScript中使用jQuery來獲取這些元素...

function calDataBound(e) { 
     $(".k-more-events span").each(function (index, element) 
     { 

     }); 
} 

...但我不知道是如何得到這個細胞代表的當天事件的數量？！

Answer 1

因此這也爲我工作...

function calDataBound(e) { 

    var scheduler = this; 
    var view = scheduler.view(); 
    var dataSourceData = scheduler.dataSource.data(); 

    // For every element that has the more events ellipses '...' 
    view.table.find(".k-more-events span").each(function() { 
     if ($(this) != null) { 
      var element = $(this); 
      if (element != null) { 
       var slot = scheduler.slotByElement(element); 
       if (slot != null) { 
        var slotStart = slot.startDate; 
        var slotEnd = slot.endDate; 

        var totalAppts = 0; 
        var visibleAppts = 0; 

        for (var i = 0; i < dataSourceData.length; i++) { 
         var appt = dataSourceData[i]; 
         var apptStartDt = appt.start; 
         var apptEndDt = appt.end; 

         // Include only appointments that are in or overlap the entire day 
         if (slotStart < apptEndDt && slotEnd > apptStartDt) { 
          totalAppts += 1; 

          var selector = 'div[data-uid="' + appt.uid + '"]'; 
          if ($(selector).length > 0) { 
           visibleAppts += $(selector).length; 
          } 
         } 
        } 

        var totalHidden = totalAppts - visibleAppts; 
        if (totalHidden > 0) { 
         element.text(totalHidden + ' more ...'); 
        } 
       } 
      } 
     } 
    }); 
} 

我也不得不調整的CSS爲.k-more-events使面板大到足以例如顯示文本

.k-more-events > span { 
    margin-top: 0em; 
    height: 20px; 
} 

div.k-more-events { 
    font-size: 12px; 
    height: 20px; 
}