更改Kendo UI Scheduler中事件的寬度

我在HTML5和javascript中創建網站。其中一個網站包含Kendo UI Scheduler。我瞭解調度程序及其工作原理，並設法設置一個簡單的調度程序和一些事件。現在，我的問題是我想改變事件被引入調度器的方式;我想將事件的大小改變爲它們顯示的列的一半大小。是否有任何簡單的方法來做到這一點，還是我必須改變計算這些事件位置的Kendo代碼？更改Kendo UI Scheduler中事件的寬度

來源

2013-10-21 Karoline Brynildsen

因爲沒有人能回答這個問題，所以我發佈了我自己的解決方案：我試着用CSS做這件事，但我無法使它工作。相反，我決定覆蓋決定調度程序事件的Kendo UI代碼。

 //Override kendo function for deciding events with 
     kendo.ui.MultiDayView.fn._arrangeColumns = function (element, top, height, slotRange) { 
      var startSlot = slotRange.start; 

      element = { element: element, slotIndex: startSlot.index, start: top, end: top + height }; 

      var columns, 
       slotWidth = startSlot.clientWidth, 
       eventRightOffset = slotWidth * 0.10, 
       columnEvents, 
       eventElements = slotRange.events(), 
       slotEvents = kendo.ui.SchedulerView.collidingEvents(eventElements, element.start, element.end); 

      slotRange.addEvent(element); 

      slotEvents.push(element); 

      columns = kendo.ui.SchedulerView.createColumns(slotEvents); 

      //This is where the magic happens 
      var columnWidth = slotWidth/2; 
      //Original code: var columnWidth = (slotWidth - eventRightOffset)/columns.length; 
      //This is where the magic ends 

      for (var idx = 0, length = columns.length; idx < length; idx++) { 
       columnEvents = columns[idx].events; 

       for (var j = 0, eventLength = columnEvents.length; j < eventLength; j++) { 
        columnEvents[j].element[0].style.width = columnWidth - 4 + "px"; 
        columnEvents[j].element[0].style.left = (this._isRtl ? this._scrollbarOffset(eventRightOffset) : 0) + startSlot.offsetLeft + idx * columnWidth + 2 + "px"; 
       } 
      } 
    };

來源

2014-01-28 07:47:21

omg，我不能相信劍道沒有提供指定單元格寬度的初始化屬性。來吧.. –

@卡羅琳，你是最好的，幾乎沒有什麼變化，我得到了調度程序，以完美滿足我的需求。 – MDDDC

我使用覆蓋CSS

.K-事件{

 clear: both; 
     margin:3px 2px 3px 2px; 
     padding:3px 1px 3px 1px; 
     border-radius: 2px; 
     border: solid 1px rgba(100, 100, 100, 0.5); 
     -webkit-box-shadow: 0px 2px 2px rgba(100, 100, 100, 0.5); 
     box-shadow: 0px 2px 2px rgba(100, 100, 100, 0.5); 
     height:auto !important; 
     width:90px !important; 
     overflow-y:auto; 
     text-align:center; 
     text-justify:auto; 
     text-shadow:0px 0px 2px rgb(200, 200, 200); 
     color:#101010; 
    }

附加「！重要的」您的設置強制使用寬度。

來源

2014-02-05 04:33:16 user3273647

是的，但調度程序是響應式的。這不會使事件響應的寬度。您無法使用百分比，因爲事件是在顯示插槽的表格的上下文之外創建的。 –

-1

我也調整與dataBount事件高度如下：

數據綁定：功能（E）{VAR 事件= $（e.sender.element）.find（「.K事件」）的高度（65）。 }，

來源

2015-08-06 15:21:53

更改Kendo UI Scheduler中事件的寬度

回答

相關問題