用于在日历上添加事件的html布局

我正在尝试制作一个类似于谷歌日历的日历，但只有月视图，在添加日期框中的事件时遇到了麻烦。我不知道他们是怎么加上这些的，因为左边的浮动不起作用，如果他们使用绝对位置，他们怎么知道每个事件的顶部是什么，如图所示。

到目前为止，我创建了这个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>

钓鱼


篮球






编码

---

是天，

是当天的事件，但我手动添加了它们。有没有简单的解决办法？谢谢你，丹尼尔

我不明白，单凭CSS是如何做到这一点的

您必须计算服务器端的重叠事件，并相应地设置

top

。如果要在客户端进行计算，必须使用一些Javascript进行计算

我应该给你一些提示