Custom calendar layout - collision detection
<p>I am trying to generate a calendar (1 day a page at the moment) on a web page using javascript (with jquery).  </p>

<p>I want the calendar events to be displayed logically and not to overlap.  The widths should adjust based on the number of events etc.  Here's a diagram of requirements i borrowed from a different post: <a href="http://i.stack.imgur.com/kaMNO.png" rel="nofollow">http://i.stack.imgur.com/kaMNO.png</a></p>

<p>I started out working from the answer (Dan M) on this post -><a href="http://stackoverflow.com/questions/10562711/custom-calendar-with-event-divs">custom calendar with event divs</a>. And it got me quite far.  But the approved answer has some flaws and is easy to break. So starting again but using the same approach as the best answer I have managed to put together this jsbin -> <a href="http://jsbin.com/agocuz/3/" rel="nofollow">http://jsbin.com/agocuz/3/</a>.  If you have a look at the code you can see that the problem is with my 14:20 event.  It only collides with 2 other events so takes up 33% of the width.  However, the event it clashes with clashes with 3 other events.  (scratches head).</p>

<p>I cant really see a good solution to this.  So far I'm using the opacity via hsla to show any dodgy overlap.</p>

<p>Any help would be greatly appreciated.  I'm not necessarily looking for someone to code the solution for me, just to give me a heads up on the pseudo code approach would be great.</p>

<p>if you look at the similar question that I linked to and want to see the answer breaking then use the following data :</p>

<pre><code>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}, 
 ];
</code></pre>
