Reactjs 创建日视图日历并在React中显示事件

我正在使用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表画）

我看过这个图书馆，但最近一次更新是在3年前。因此，我克隆了该回购协议并审查了代码。但他的代码让我很难理解他计算列数和扩展事件时间块宽度的部分

我知道他使用位置绝对风格来画黑线小时，开始时间是为位置为区块，持续时间和结束时间是为区块的高度。但他计算的在同一小时内划分多个事件块的列和宽度的部分真的很复杂

如果有人了解算法或有更好的计算方法，请解释清楚，以便我能理解它是如何显示的。多谢各位