自定义日历事件的div [英] Custom calendar with event divs

问题描述

我的事件系统，其基本上与720px高度与每个像素再presenting从上午9时一分钟容器9PM且具有宽度的620px上工作（10px的填充从左右）

I am working on an event system which is basically a container with 720px height with each pixel representing one minute from 9AM to 9PM and has width of 620px (10px padding from left and right)

日历系统的自然要求是：

The natural requirement for the calendar system is that:

• 的对象应该进​​行布局，使他们不会在视觉上重叠。
• 如果在一个时隙一个事件，它的宽度将600px的
• 每个碰撞事件必须是相同的宽度，它碰撞宽度每隔其它事件。
• 在事件应该尽可能使用最大宽度，同时还秉承了第一个限制条件。

输入将是一个数组是这样的：

The input will be an array something like:

[
 {id : 1, start : 30, end : 150},  // an event from 9:30am to 11:30am
 {id : 2, start : 540, end : 600}, // an event from 6pm to 7pm
 {id : 3, start : 560, end : 620}, // an event from 6:20pm to 7:20pm
 {id : 4, start : 610, end : 670} // an event from 7:10pm to 8:10pm
]

我已经创建所需要的布局，但我坚持用JavaScript部分:(这是我到目前为止有：

I have created the needed layout but I am stuck with JavaScript part :( This is what I have so far:

var Calendar = function() {

   var layOutDay = function(events) {
     var eventsLength = events.length;

     if (! eventsLength) return false;

     // sort events
     events.sort(function(a, b){return a.start - b.start;});

     for (var i = 0; i < eventsLength; i++) {
         // not sure what is next
     }         

   };

   return {
       layOutDay : layOutDay,
   }

}();

需要创建的div并将其按上述要求的位置。

Need to create divs and position them as per above requirements.

请参阅JSBin演示。

任何帮助将大大AP preciated。

Any help will be greatly appreciated.

推荐答案

下面是一个有效的解决方案： HTTP： //jsbin.com/igujil/13/edit#$p$pview

Here is a working solution: http://jsbin.com/igujil/13/edit#preview

正如你所看到的，这不是一个容易解决的问题。让我带你通过我如何做的。

As you can see, it's not an easy problem to solve. Let me walk you through how I did it.

第一步，标记步骤0 ，是为了确保事件被编号的顺序排列。这将使我们的生活更轻松，当我们开始用数据玩。

The first step, labelled Step 0, is to make sure the events are sorted by id. This will make our lives easier when we start playing with the data.

第1步是初始化二维时隙的数组。对于日历的每一分钟，我们要作出这将包含采取分钟内发生的事件的数组。我们这样做的......

Step 1 is to initialize a 2-dimensional array of timeslots. For each minute in the calendar, we're going to make an array which will contain the events that take place during that minute. We do that in...

第2步！您会注意到我添加了一个检查，以确保在活动开始之前结束。一点点防守，但我的算法将打在坏数据的无限循环，所以我希望确保这些事件是有意义的。

Step 2! You'll note I added a check to make sure the event starts before it ends. A little defensive, but my algorithm would hit an infinite loop on bad data, so I want to make sure the events make sense.

目前循环结束时，我们的时隙阵列将是这样的：

At the end of this loop, our timeslot array will look like this:

0：[]
1：[]
...
30：[1]
31：[1]
...
（直接跳到了一些有趣的数字）
540：[2]
560：[2,3]
610：[3,4]

0: []
1: []
...
30: [1]
31: [1]
...
(skipping ahead to some interesting numbers)
540: [2]
560: [2,3]
610: [3,4]

我鼓励你们加入的console.log（时隙）只是，如果你困惑/好奇，之前第3步。这是解决问题的一个非常重要的一块，而接下来的步骤是更大量难以解释

I encourage you to add console.log(timeslots) just before Step 3 if you're confused/curious. This is a very important piece of the solution, and the next step is a lot more difficult to explain.

第3步是我们解决计划冲突。每个事件都需要知道两件事情：

Step 3 is where we resolve scheduling conflicts. Each event needs to know two things:

1. 的时候，它冲突的最大数量。
2. 在它的水平排序（使冲突不重叠）。

（1）很容易，因为我们是如何存储数据;每个时隙的阵列的宽度是事件的数量。时隙30，例如，只有1个事件，因为事件＃1是当时唯一的一个。在时隙560，但是，我们有两个事件，所以每个事件（＃2，＃3）获得两个计数。 （如果有一排有三个事件，他们都拿到三的计数，等等。）

(1) is easy because of how our data is stored; the width of each timeslot's array is the number of events. Timeslot 30, for example, has only 1 event, because Event #1 is the only one at that time. At Timeslot 560, however, we have two events, so each event (#2 and #3) gets a count of two. (And if there was a row with three events, they would all get a count of three, etc.)

（2）是多了几分含蓄。事件＃1是显而易见的，因为它可以跨越日历的整个宽度。事件＃2将不得不缩小其宽度，但它仍可以沿着左边缘开始。赛事＃3不能。

(2) is a little more subtle. Event #1 is obvious enough, because it can span the entire width of the calendar. Event #2 will have to shrink its width, but it can still start along the left edge. Event #3 can't.

我们解决了这个与每个时隙的变量我叫 next_hindex 。它从0开始，因为默认我们想要沿左边缘的位置，但它会发现有冲突，每次增加。这样一来，下一个事件（下这块我们的冲突）将开始在接下来的水平位置。

We solve this with a per-timeslot variable I called next_hindex. It starts at 0, because by default we want to position along the left edge, but it will increase each time we find a conflict. That way, the next event (the next piece of our conflict) will start at the next horizontal position.

第四步是更简单了不少。宽度计算使用从第3步：我们最大的冲突次数如果我们知道我们有2个事件在5:50，例如，我们知道每个事件有1/2日历的宽度。 （如果我们有3事件中，每个将是1/3等）的x位置被类似地计算;我们的hindex倍增，因为我们希望通过事件（冲突数）的宽度来弥补。

Step 4 is quite a bit more straightforward. The width calculation uses our max-conflict count from Step 3. If we know we have 2 events at 5:50, for example, we know each event has to be 1/2 the width of the calendar. (If we had 3 events, each would be 1/3, etc.) The x-position is calculated similarly; we're multiplying by the hindex because we want to offset by the width of (number of conflict) events.

最后，我们只需要创建一个小的DOM，我们的定位事件的div，并设置一个随机的颜色，所以它们很容易分辨。其结果是（我认为）你要找的是什么

Finally, we just create a little DOM, position our event divs, and set a random colour so they're easy to tell apart. The result is (I think) what you were looking for.

如果您有任何问题，我很乐意回答。我知道这可能是更code（以及更多的复杂性），比你期待，但它是一个令人惊讶的复杂的问题要解决：）

If you have any questions, I'd be happy to answer. I know this is probably more code (and more complexity) than you were expecting, but it was a surprisingly complicated problem to solve :)

这篇关于自定义日历事件的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！