在Kendo UI Scheduler中更改事件的宽度 [英] Change the width of the events in a Kendo UI Scheduler
问题描述
我正在用HTML5和javascript创建一个网站.该站点之一包含 Kendo UI Scheduler .我了解调度程序及其工作原理,并且设法建立了一个包含一些事件的简单调度程序. 现在,我的问题是我想更改将事件绘制到调度程序中的方式.我想将事件的大小更改为它们在其中显示的列的大小的一半.是否有任何简单的方法来执行此操作,还是我必须更改用于计算这些事件位置的Kendo代码? /p>
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代码,该代码决定了调度程序事件的with.
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屋!