html layout for adding events on a calendar

Question

I'm trying to make a similar calendar like google calendar but only month view, and I got troubles adding the events on the days boxes. I have no idea how they add those like that because the float left does not work, and if they use position absolute, how do they know what top to give each event, like in this picture. http://i40.tinypic.com/1hcfuw.jpg

So far I created this html

    <div class="week">
        <ul>
            <li style="width: 300%;">Fishing</li>
        </ul>
        <ul>
            <li style="width: 400%; margin-top: 23px;">Basketball</li>
        </ul>
        <ul>
        </ul>
        <ul>
        </ul>
        <ul>
            <li style="width: 200%;">Coding</li>
        </ul>
        <ul>
        </ul>
        <ul>
        </ul>
    </div>

The <ul> are days and <li> are events in that day, but I added them manually. Is there an easy solution to this? Thank you, Daniel!

Answer 1

I don't see, how this can be done with CSS alone.

You must calculate the overlapping events on the server side and set the top accordingly. If you want to do it on the client side, you must do the calculation with some Javascript.

Google: javascript calendar events should give some hints.