按日期使每个事件适合边界框

时间:2014-12-04 02:11:08

标签: kendo-ui scheduler kendo-scheduler

here

为例

我想让事件看起来像这样:

case A

而不是页面上的内容:

case B

注意事件和边界框之间是否有空格。

似乎元素样式由调度程序自动生成并计算宽度。我将如何扩展事件以完全适合边界框?

1 个答案:

答案 0 :(得分:0)

我在another stackedoverflow question找到了答案。

这是她的代码跳过columns.length而不是2

//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 / columns.length;
        //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";
            }
        }
};