首先，我非常感谢您的任何意见。我不是要你为我做这件事，我只是想知道你对处理这个项目的最佳方式的想法。请看下图：
抱歉，它是德语，重要的翻译如下：
verfügbar = 可用
的 bereits reserviert = 已预订
Uhrzeit = 时间段
aktuelle Woche = 本周
和 Mo、Di、Mi 等是一周中日期的缩短。
我将快速解释它应该做什么，因为图片并不能真正解释一切。它基本上是在“某人”全天有空时显示。数据将被提取为 JSON 并为每个用户动态显示并列出两周。我们所在的一周，以及未来的一周。
无论如何，我真的很想听听您对解决此问题的最佳方式的意见。我最初的想法是：Unix 时间戳，找到时间差并将其转换为像素以用作每个 div 的高度。但后来让我感到震惊的是，我无法找到 div 应该从哪里开始。（也许它从图片上的 10:00 开始，我将如何确定）
我想在画布上做这个，但是对画布的经验很少，所以我避免了。如果你会推荐它，请大声喊叫。我正在寻找理想的解决方案。
只是知道该学什么对我有很大的帮助，任何意见都将不胜感激！
谢谢你的时间，
彼得
编辑：对不起，我忘了提到这些事情，感谢您指出：
预留时间数据也将被拉取，用户可以决定在该时间段内是否可用或不可用。我不太确定在同一天拥有两个酒吧会有多复杂。例如：06:00 到 12:00 不可用，但 12:00 到 18:00 可用。所以我暂时避免这种情况。
时间间隔为 15 分钟。对于每 15 分钟，应该/可以将 9px 添加到高度。
感谢您的回复。