我正在使用fullCalendar jquery插件。
我试图使我的事件在议程视图显示从左到右按开始时间排序。
本质上,我想删除事件的堆叠,所以9-11事件将显示在12-4事件的旁边,而不是上面。
看起来有几个函数与事件排序相关。
function segCmp(a, b) {
var tryCmp = (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start);
if (tryCmp == 0)
return (a.event.rowId - b.event.rowId);
return tryCmp;
}
function segsCollide(seg1, seg2) {
return seg1.end > seg2.start && seg1.start < seg2.end;
}
// event rendering utilities
function sliceSegs(events, visEventEnds, start, end) {
var segs = [],
i, len=events.length, event,
eventStart, eventEnd,
segStart, segEnd,
isStart, isEnd;
for (i=0; i<len; i++) {
event = events[i];
eventStart = event.start;
eventEnd = visEventEnds[i];
if (eventEnd > start && eventStart < end) {
if (eventStart < start) {
segStart = cloneDate(start);
isStart = false;
}else{
segStart = eventStart;
isStart = true;
}
if (eventEnd > end) {
segEnd = cloneDate(end);
isEnd = false;
}else{
segEnd = eventEnd;
isEnd = true;
}
segs.push({
event: event,
start: segStart,
end: segEnd,
isStart: isStart,
isEnd: isEnd,
msLength: segEnd - segStart
});
}
}
return segs.sort(segCmp);
}
// event rendering calculation utilities
function stackSegs(segs) {
var levels = [],
i, len = segs.length, seg,
j, collide, k;
for (i=0; i<len; i++) {
seg = segs[i];
j = 0; // the level index where seg should belong
while (true) {
collide = false;
if (levels[j]) {
for (k=0; k<levels[j].length; k++) {
if (segsCollide(levels[j][k], seg)) {
collide = true;
break;
}
}
}
if (collide) {
j++;
}else{
break;
}
}
if (levels[j]) {
levels[j].push(seg);
}else{
levels[j] = [seg];
}
}
return levels;
}
任何想法吗?
日历中的时隙方向为从上到下,而不是从左到右。我认为不可能改变这种倾向。
有一个选项,你可以传递给fullCalendar()
,将禁用重叠的事件在议程一天和议程周视图,它是slotEventOverlap: false
。