title: fullCalendar.js: align events in the same horizontal line
body: <p>In a nutshell, this is what I have now:</p>
  
  <p><img src="https://i.stack.imgur.com/ZWy1O.png" alt="enter image description here"></p>
  
  <p><em>the triangle and the circle are two different event in the same say. Now they are aligned vertically on top of eachother.</em></p>
  
  <p>And this is what I would like to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/bqq3r.png" alt="enter image description here"></p>
  
  <p><em>The two events are aligned horizontally.</em></p>
  
  <p>So <code>float: left</code> doesn't work here because the events in full calendar are <code>absolute</code>ly positioned to the  main calendar's div. It has to do something with moving dynamically the <code>top</code> and <code>left</code> by detecting which events are on the bottom lines. But how?</p>