Custom calendar with event divs

Question

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

Answer 1

I would approach the problem as follows.

A divider is any moment within a day that no event crosses. So if you have one event from 9 am to 11 am and another from 11 am to 1 pm, and no other events, there is a divider at 11 am, and at any time at 1 pm or later, and at any time at 9 am or earlier.

I would divide every day into a set of "eventful time spans" that are maximum time spans containing no dividers. For every eventful time span, I would calculate the maximum number of concurrently overlapping events, and use that as the "column number" for that event span. I would then layout every eventful time span greedily on the calculated number of columns so that every event would be laid out as left as possible, in the order of the starting times of the events.

So, for example the following schedule:

A  9 am - 11 am
B 10 am - 12 pm
C 10 am -  1 pm
D  1 pm  - 2 pm
E  2 pm  - 5 pm
F  3 pm  - 4 pm

would be processed as follows. The eventful time spans are 9 am - 1 pm, 1 pm - 2 pm, and 2 pm - 5 pm as there are dividers at 1 pm and 2 pm (no event crosses those times).

On the first span, there are maximum three overlapping events, on the second only one, and on the third, two.

The columns are allocated like this:

 9 am - 10 am  |   |   |   |
10 am - 11 am  |   |   |   |
11 am - 12 pm  |   |   |   |
12 pm -  1 pm  |   |   |   |___ end of first e.t.s.
 1 pm -  2 pm  |           |___ end of second e.t.s.
 2 pm -  3 pm  |     |     |
 3 pm -  4 pm  |     |     |
 4 pm -  5 pm  |     |     |

After which the events are filled in, in their chronological order greedily:

 9 am - 10 am  | A |###|###|
10 am - 11 am  |_A_| B | C |
11 am - 12 pm  |###|_B_| C |
12 pm -  1 pm  |###|###|_C_|
 1 pm -  2 pm  |_____D_____|
 2 pm -  3 pm  |  E  |#####|
 3 pm -  4 pm  |  E  |__F__|
 4 pm -  5 pm  |__E__|#####|

which looks very reasonable. # denotes free space