自定义日历布局 - 碰撞检测

Question

我正在尝试使用javascript（使用jquery）在网页上生成日历（目前每页1天）。

我希望日历事件以逻辑方式显示，而不是重叠。宽度应该根据事件的数量等进行调整。这是我从不同的帖子借来的要求图：

我从这篇文章的答案（Dan M）开始工作 - ＆gt; custom calendar with event divs。它让我走得很远。但批准的答案有一些缺陷，容易打破。所以重新开始，但使用相同的方法作为最好的答案，我设法把这个jsbin - ＆gt; http://jsbin.com/agocuz/3/。如果您查看代码，您可以看到问题出在我的14:20事件中。它只与其他2个事件碰撞，因此占据了宽度的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}, 
 ];

Answer 1

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

您还需要检查它们的大小，并使用适当的最小尺寸（以防由于之前的重叠而变小 - 例如）

因此，不需要检查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;
  }

http://jsbin.com/iFUNetE/1/

演示

---

<强>更新

添加了此代码

 // UPDATE CODE AFTER COMMENT
  // fix numcolumns
  for (m=0; m<MINUTESINDAY; m++) {
    ts = timeslots[m];
    for (e=0; e<ts.length; e++) {
      event = EventsById[ ts[e] ];
      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;
      }
    }
  }

解决@guioconnor在评论中发现的问题。

http://jsbin.com/fopuxakabunu/1/

演示