I am building an event calendar and am stuck binning single-day events around multi-day events. Each day is a div and I can build a month calendar no problem. The problem is mainly when multi-day events overlap and one will break line. The top blue line is continuous, yellow until 6th, red until 7th.

I have searched 'bin stacking' and many other approaches but can't seem to find what seems apt. Part of the problem is my maths limitations and found algorithms end up leave me feeling boggled. My current (non-math) concept is to build an array of arrays; 'number of days in the month' wide by 'expected maximum number of events high.'
Roughly like:

    xxxxxx... xxx // say 31 days  
    xxxxxx... xxx  
    ... +6  
    xxxxxx... xxx  
    xxxxxx... xxx // say max 10 events in any day.

A bit of pseudo code...
Run through array[0] for blueEv > is [0][4]=='x' && [0][5]=='x' && [0][6]=='x' = yes, then lay it in.
for yellowEv > is [0][4]=='x' && [0][5]=='x' = no - then
is [1][4]=='x' && [1][5]=='x' = yes - then do it
redEv... [0] no good [1/] no good and [2] fits
and so on through spanned events and then slot in singles into remaining 'x' slots
remove 'x's and empty arrays at the end and... well, it works but I suspect there is a much more elegant way of doing this.

Pointing to any existing algorithms or functions or some such would be great. I can code tolerably well enough so, in the absence of any known existing code, an outline of approach would great. I am just rounding out the list-view (piece of cake :) and girding my loins ready for month-view.
Q. Why don't I use an existing cal? There are certainly plenty. A. Learning + fun.

Thank you.