Identify overlapping div's in table column using jquery
<p>So my goal is to duplicate some of the functionality of Google Calendar - mainly the "Week view" which lists appointments in a timeline from top to bottom.</p>

<p>I'm using jQuery and the layout is a simple HTML table with 7 TD columns, one for each day, and one col at the start to render the hours from 12am -> 11pm. Events are positioned within each column using absolute position and a calculation based on "minutes from midnight" / pixels-per min, etc. </p>

<p>I'm stuck at the issue of positioning "events" next to each other if their start/end times overlap at any point in the timeline. My approach would be:</p>

<ol>
<li><p>Every time I'm about to position a new event in a day-column, do something like $(col).find('.event') - which gives me an array of all events currently positioned within the current day-column</p></li>
<li><p>Run a function that takes the new event I want to position and all existing events in the column and then returns me an array of divs/events that are colliding with the new event. (THIS IS WHERE I'm stuck...)</p></li>
<li><p>Then update the width of each colliding event/div using a percentage so that divs can "live" next to each other in the column, rather than overlapping</p></li>
</ol>

<p>Any help on this would be greatly appreciated.</p>

<p>Thanks</p>
