HTML-макет для добавления событий в календарь

я пытаюсь сделать аналогичный календарь, такой как календарь Google, но только для просмотра месяца, и у меня возникли проблемы с добавлением событий в поля дней. я понятия не имею, как они добавляют такие, потому что левое плавание не работает, и если они используют абсолютную позицию, как они узнают, какую вершину присвоить каждому событию, как на этом рисунке. http://i40.tinypic.com/1hcfuw.jpg

Пока я создал этот 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>

<ul> — это дни, а <li> — события в этот день, но я добавил их вручную. Есть ли простое решение для этого? Спасибо, Даниил!