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

Question

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

我希望日历事件能够逻辑显示并且不重叠。宽度应根据事件的数量等进行调整。这是我从另一篇文章借用的要求图:

我从这篇文章的答案(Dan M)开始工作 -> custom calendar with event divs 。这让我走得很远。但批准的答案有一些缺陷，很容易被破解。因此，重新开始，但使用与最佳答案相同的方法，我设法将这个 jsbin -> 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/