可用性日历jQuery（？）

Question

首先，我非常感谢任何意见。我不是要求你为我做这件事，我想知道你对这个项目的最佳方法的想法。请参阅下图：

对于德语的道歉，重要的翻译如下：

verfügbar=可用
bereits reserviert =已预留
Uhrzeit =时间段
aktuelle Woche =本周
而Mo，Di，Mi等是一周中的日子缩短。

我会很快解释它应该做什么，因为图片并没有真正解释一切。它基本上显示当一天有“某人”可用时。数据将作为JSON提取并动态显示给每个用户并列出两周。我们正在进行的一周以及未来的一周。

无论如何，我真的很想就最好的方式发表意见。我最初的想法是：Unix时间戳，找到时差并将其转换为像素，用作每个div的高度。但后来让我感到震惊的是，我无法找到div应该从哪里开始。 （也许它在10:00开始，如图所示，我将如何确定）

我想过在画布上做这个，但是对Canvas的经验很少，所以我避免了。如果你会推荐它，请喊。我正在寻找理想的解决方案。

只是知道学什么对我来说是一个很大的帮助，任何意见都将在船上感激不尽！

感谢您的时间，
彼得

编辑：对不起，我忘了提起这些事情，谢谢你指出：

还将提取预留时间数据，用户可以决定在此期间是否可用或不可用。我不确定在同一天有两个酒吧会有多复杂。例如：从06:00至12:00不可用，但可在12:00至18:00之间使用。所以我暂时避免这样做。

时间间隔为15分钟。每15分钟9px应该/可以添加到高度。

感谢您的回复。

Answer 1

你可以在一个<table>和聪明的CSS样式中做到......每个<td>是15分钟和9px高度。第一个和最后一个包含开始/结束时间。 我查看了http://www.project-open.org/的演示后我有一些类似的要求并用表和css解决了这个问题，他们有时会使用表来显示日历/里程碑数据。此外，Google日历使用表格：https://www.google.com/calendar/

Answer 2

这个jquery-plugin可能值得一看 https://github.com/themouette/jquery-week-calendar

看起来它使用table（s）和div的组合来进行布局