我正在用 HTML5 和 javascript 创建一个网站。其中一个站点包含Kendo UI Scheduler。我了解调度程序及其工作原理,并且我设法设置了一个包含一些事件的简单调度程序。现在,我的问题是我想改变将事件引入调度程序的方式;我想将事件的大小更改为显示它们的列大小的一半。有什么简单的方法可以做到这一点,还是我必须更改计算这些事件位置的剑道代码?
问问题
5691 次
3 回答
9
由于没有人可以为我回答这个问题,我发布了我自己的解决方案:我尝试使用 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-28T07:47:21.657 回答
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”以通过您的设置强制使用宽度。
:)
于 2014-02-05T04:33:16.570 回答
-2
我还使用 dataBount 事件调整高度,如下所示:
dataBound: function (e) { var events = $(e.sender.element).find(".k-event").height(65); },
于 2015-08-06T15:21:53.257 回答