在 Kendo UI Scheduler 中更改事件的宽度 [英] Change the width of the events in a Kendo UI Scheduler

问题描述

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

I am creating a website in HTML5 and javascript. One of the site contains the Kendo UI Scheduler. I understand the scheduler and how it works, and I've managed to set up a simple scheduler with some events. Now, my problem is that I want to alter the way the events is drawn in to the scheduler; I want to alter the size of the events to be half the size of the column they are displayed in. Is there any simple way to do this, or do I have to alter the Kendo code that is calculating the position of these events?

推荐答案

由于没有人可以为我回答这个问题，我发布了我自己的解决方案:我尝试使用 CSS 执行此操作，但无法使其正常工作.相反，我决定覆盖决定调度程序事件的 Kendo UI 代码.

Since nobody could answer this for me, I'm posting my own solution: I tried doing this with CSS, but I wasn't able to make it work. In stead I decided to override the Kendo UI code that decided the with of the scheduler events.

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

这篇关于在 Kendo UI Scheduler 中更改事件的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！