1

我正在使用 React Native 创建像 Google 这样的显示事件时间块的日视图日历。

我有一个数组，其中包含许多具有标题、开始时间、结束时间和持续时间的对象。例如：

[
   {title: "Event A", startTime: "01:00:00", endTime: "02:00:00",duration: "60 min"},
   {title: "Event B", startTime: "01:00:00", endTime: "03:00:00",duration: "120 min"},
   {title: "Event C", startTime: "02:00:00", endTime: "04:00:00",duration: "120 min"},
   {title: "Event D", startTime: "03:00:00", endTime: "04:00:00",duration: "60 min"},
]

我希望它显示像这个 示例日历这样的事件（我用 GG 表绘制它）

我浏览了这个库https://github.com/duyluonglc/但它最后一次更新是在 3 年前。所以我克隆了那个 Repo 并查看了代码。但是他的代码让我很难理解他计算列数和扩展事件时间块宽度的部分。

我知道他使用位置绝对样式绘制黑色小时线，开始时间是块的位置，持续时间和结束时间是块的高度。但是他计算在同一小时内划分多个事件块的列和宽度的部分确实很复杂。

如果有人了解该算法或有更好的计算方法，请解释清楚，以便我了解它的显示方式。谢谢你。

4

0 回答 0