更改 Kendo UI 调度程序中事件的宽度

Posted

技术标签:

【中文标题】更改 Kendo UI 调度程序中事件的宽度【英文标题】:Change the width of the events in a Kendo UI Scheduler 【发布时间】:2013-10-29 13:19:24 【问题描述】:

我正在用 html5 和 javascript 创建一个网站。其中一个站点包含Kendo UI Scheduler。我了解调度程序及其工作原理,并且我设法设置了一个包含一些事件的简单调度程序。 现在,我的问题是我想改变将事件引入调度程序的方式;我想将事件的大小更改为显示它们的列大小的一半。有什么简单的方法可以做到这一点,还是我必须更改计算这些事件位置的剑道代码?

【问题讨论】:

【参考方案1】:

由于没有人可以为我回答这个问题,我发布了我自己的解决方案: 我尝试用 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";
                
            
    ;

【讨论】:

omg,我不敢相信剑道没有提供用于指定单元格宽度的初始化属性。来吧.. @Karoline ,你是最棒的,几乎没有什么改变我让调度程序完美地满足我的需求。 @Karoline Brynildsen 你如何在调度器中调用这个函数? @thinzar,你没有。通过包含此脚本,kendo 的实现将被您提供的内容覆盖,并且当调度程序调用此方法时,执行的是 this 实现。这几乎就像在 C#/Java/C++ 中覆盖虚拟方法。【参考方案2】:

我正在使用覆盖 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;
    

附加“!important”以通过您的设置强制使用宽度。

:)

【讨论】:

是的,但是调度程序是响应式的。这不会使事件的宽度响应。您不能使用百分比,因为事件是在显示槽的表格的上下文之外创建的。【参考方案3】:

我还使用 dataBount 事件调整高度,如下所示:

数据绑定:函数(e) var events = $(e.sender.element).find(".k-event").height(65); ,

【讨论】:

以上是关于更改 Kendo UI 调度程序中事件的宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何将事件添加到 Kendo UI 调度程序?

如何以编程方式为 Kendo Ui 调度程序调用导航事件

在 kendo ui 网格更改事件上获取单击的单元格

为 kendo ui Combobox 触发了两次更改事件

Kendo 调度程序:在调度程序之间移动事件

在 Kendo UI Mobile 的显示事件中更改标题?