title: Visualization of calendar events. Algorithm to layout events with maximum width
body: <p>I need your help with an algorithm (it will be developed on client side with javascript, but doesn't really matter, I'm mostly interested in the algorithm itself) laying out calendar events so that each event box has maximum width. Please see the following picture:</p>
  
  <p><img src="https://i.stack.imgur.com/8PVnY.png" alt="calendar events layout"></p>
  
  <p>Y axis is time. So if "Test event" starts at noon (for example) and nothing more intersects with it, it takes the whole 100% width. "Weekly review" intersects with "Tumbling YMCA" and "Anna/Amelia", but the latter two are not intersecting, so they all fill up 50%. Test3, Test4 and Test5 are all intersecting, so max width is 33.3% for each. But Test7 is 66% since Test3 is 33% fixed (see above) , so it takes all available space , which is 66%. </p>
  
  <p>I need an algorithm how to lay this out.</p>
  
  <p>Thanks in advance</p>