几天前我在webapps.stackexchange.com上问了以下问题：
https://webapps.stackexchange.com/questions/54130/is-there-a-way-to-remove-overlaying-events-in-google-calendar
https://webapps.stackexchange.com/questions/54130/is-there-a-way-to-remove-overlaying-events-in-google-calendar
到目前为止我没有得到任何好的答案,所以我决定编写自己的小脚本,根据重叠事件的数量改变事件的宽度.
我想避免重叠盒子并希望它们堆叠.
这是初步测试：
下面是一个基本的脚本,其中包含以
$('[class^="tg-col"]').each(function(){ // each day column
//(Mon,Tue,etc. has class tg-col or tg-col-weekend.
var ItemArray = [];
$(this).find(".chip").each(function(){ //each event Box has chip class.
var top = $$(this).position().top; //Get top pixels
var bottom = $$(this).height() + top; //get end of the event.
var arr = ItemArray.push({
class: $$(this).attr("class").split(" ")[0],start : top,end:bottom
});
});
var result = getOverlaps(ItemArray); //get overlaps counts number of overlapping events.
$$.each(result,function(index,value){
var ec = result[index].eventCount;
var w = 100/result[index].eventCount-1 + "%";
var el = $$("."+result[index].class);
el.width(w);
//el.css("left",w);
});
});
function getOverlaps(events) {
// sort events
events.sort(function (a,b) {
return a.start - b.start;
});
var results = [];
for (var i = 0,l = events.length; i < l; i++) {
var oEvent = events[i];
var nOverlaps = 0;
for (var j = 0; j < l; j++) {
var oCompareEvent = events[j];
if (oCompareEvent.start <= oEvent.end && oCompareEvent.end > oEvent.start || oCompareEvent.end <= oEvent.start && oCompareEvent.start > oEvent.end) {
nOverlaps++;
}
}
if (nOverlaps > 1) {
results.push({
class: oEvent.class,eventCount: nOverlaps
});
}
}
return results;
}
此解决方案仅适用于简单事件(左侧)：
对于更复杂的重叠,我们不能简单地计算重叠数和潜水100％/重叠数.我们必须考虑其他方面.
此外,在谷歌日历中的每次操作后,它重绘事件和脚本更改丢失.有没有更简单的方法来解决这个问题？
(也许有可能直接修改从谷歌收到的js？(但它缩小了:().
解决方法
您已经有正确的左侧位置,因此您只需要设置正确的宽度.
在伪代码中：
foreach chip
chips_siblings = this.parent
.allchilds(chip)
.filter(this.top <= child.top <= this.bottom
&& child.left > this.left)
this.width = min(chips_siblings.left) - this.left
在JavaScript中：
function placeChipsCorrectly() {
"use strict"
Array.prototype.forEach.call(
document.getElementsByClassName('chip'),function(self) {
var siblings = Array.prototype.filter.call(
self.parentElement.getElementsByClassName('chip'),function(child) {
return child.offsetTop >= self.offsetTop-2 &&
child.offsetTop <= self.offsetTop+self.offsetHeight-3 &&
child.offsetLeft > self.offsetLeft;
});
if (siblings.length > 0) {
var minLeft = Math.min.apply(null,Array.prototype.map.call(
siblings,function(el) {
return el.offsetLeft;
}));
self.style.width = (minLeft - self.offsetLeft - 2) + "px";
}
});
}
placeChipsCorrectly();
至于跟踪修改事件：
每次数据更改后,您都可以在右上角看到“正在加载…”.在检查它是如何工作之后,你可以看到它改变了容器的样式属性,其中id为lo-c.
因此,您可以跟踪它的外观和消失,如下所示：
(new MutationObserver(placeChipsCorrectly)).observe(document.getElementById('lo-c'),{attributes: true});
当您仅修改视图而不是数据时(例如,通过选择另一天或一周),则不会显示“正在加载…”.对于这些事件,您可以跟踪全局点击事件：
document.body.addEventListener('click',placeChipsCorrectly);
请记住,这两种方法都需要一些开销.如果你想改进它们,首先修改观察者,使其仅在消失时调用placeChipsCorrect,并限制点击跟踪到特定控件.
