Javascript 自定义日历布局-冲突检测

我正在尝试使用javascript（带jquery）在网页上生成一个日历（目前一页一天）

我希望日历事件以逻辑方式显示，而不是重叠。宽度应根据事件数量等进行调整。以下是我从另一篇文章中借用的需求图：

我从这篇文章的答案（Dan M）开始工作->。这让我走得很远。但是，认可的答案有一些缺陷，很容易被打破。因此，请重新开始，但使用与最佳答案相同的方法，我成功地整理了这个jsbin->。如果你看一下代码，你会发现问题出在我的14:20事件上。它只与其他两个事件发生碰撞，因此占据了宽度的33%。但是，与之冲突的事件与其他3个事件发生冲突。（划伤头部）

我真的看不出一个好的解决办法。到目前为止，我通过hsla使用不透明度来显示任何不可靠的重叠

任何帮助都将不胜感激。我不一定要找人为我编写解决方案的代码，只是让我了解一下伪代码方法就好了

如果您查看我链接到的类似问题，并希望看到答案突破，请使用以下数据：

var events = [
  {id: 1, start: 0, end: (3 * 60)},
  {id: 2, start: 0, end: (6.5 * 60)},
  {id: 3, start: 60, end: (15-9) * 60},
  {id: 4, start: 80, end: (13-9) * 60},
  {id: 5, start: (12-9)*60, end: (14-9)*60}, 
 ];

---

问题是，您只检查在特定时间内存在多少事件

您还需要检查它们的大小，并使用适当的最小大小（以防它们由于之前的重叠而变小-就像您的情况一样）

因此，您需要检查该时隙的事件大小，而不是检查

ts.length

var max = ts.length;
ts.forEach(function(id){
    var evt = EventsById[id];
    max=(evt.numcolumns>max)?evt.numcolumns:max;
  });

if (event.numcolumns <= max) {    
    event.numcolumns = max;
  }

var max=ts.length；
ts.forEach（函数（id）{
var evt=EventsById[id]；
max=（evt.numcolumns>max）？evt.numcolumns:max；
});
如果（event.numcolumns，问题在于您只检查在特定时间内存在多少事件

您还需要检查它们的大小，并使用适当的最小大小（以防它们由于之前的重叠而变小-就像您的情况一样）

因此，您需要检查该时隙的事件大小，而不是检查
ts.length

var max = ts.length;
ts.forEach(function(id){
    var evt = EventsById[id];
    max=(evt.numcolumns>max)?evt.numcolumns:max;
  });

if (event.numcolumns <= max) {    
    event.numcolumns = max;
  }

var max=ts.length；
ts.forEach（函数（id）{
var evt=EventsById[id]；
max=（evt.numcolumns>max）？evt.numcolumns:max；
});
if（event.numcolumns）此解决方案也无法解决问题。如果有一系列事件集体冲突，但没有完全成对冲突，则算法将中断。（请参阅此处的jsbin:）。您必须递归地返回到过去与当前事件发生冲突的事件，并对其进行更新。我的解决方案不容易放在pastebin上，因为我正在创建多个对象，它们以非平凡的方式交互（如果有时间，我将尝试创建简化的版本）但基本上，解决方案是为每个事件保留一个以前事件的列表（而不是将来，这是多余的，尽管不是不正确的）碰撞，并在事件更改其numcolumns时重复更新这些事件。这样，即使在基于碰撞的碰撞之后，您也可以重新访问事件，而不仅仅是直接碰撞。@guioconnor发布了一个更新的代码来解决此问题。其概念是，因为我们已经存储了每个事件的列数，只需在时间段上迭代即可第二次更新列号（基于最大值）将解决此问题。这是一种有趣的方法。此解决方案也无法解决此问题。如果有一系列事件集体冲突，但没有完全成对冲突，则算法将中断。（请参见此处的jsbin:）。您必须递归地返回到过去与当前事件发生冲突的事件，并对其进行更新。我的解决方案不容易放在pastebin上，因为我正在创建多个对象，它们以非平凡的方式交互（如果有时间，我将尝试创建简化的版本）但基本上，解决方案是为每个事件保留一个以前事件的列表（而不是将来，这是多余的，尽管不是不正确的）碰撞，并在事件更改其numcolumns时重复更新这些事件。这样，即使在基于碰撞的碰撞之后，您也可以重新访问事件，而不仅仅是直接碰撞。@guioconnor发布了一个更新的代码来解决此问题。其概念是，因为我们已经存储了每个事件的列数，只需在时间段上迭代即可第二次更新列号（基于最大值）将解决问题。这是一种有趣的方法。