1

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

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

http://i.stack.imgur.com/kaMNO.png

我从这篇文章的答案 (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}, 
 ];
4

1 回答 1

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/

于 2014-01-11T11:58:49.517 回答