Javascript 可用性日历jQuery（？）

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

抱歉用德语翻译，重要的翻译如下：

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添加到高度

---

感谢您的回复。

您可以在

和巧妙的css样式内完成此操作。。。每个

都有15分钟和9像素的高度。第一个和最后一个包含开始/结束时间。

---

我有一些类似的需求，在我查看了他们有时使用表来显示日历/里程碑数据的演示后，我用表和css解决了这个问题。此外，Google日历使用表：

这个jquery插件可能值得一看

---

看起来它使用了表和div的组合来进行布局

您如何确定某人是否可用？您在这里谈论的是多少“单位”？小时，半小时，分钟。。从某个小时+分钟的角度来看，这里使用了什么可用性？谢谢你的评论，我已经用附加信息更新了我的帖子。是的，这是另一个想法，我在这里找到了类似的东西：studirent.com/content/studirenth尽管我不喜欢它看起来有多俗气，我想页面上应该有多少标记。。。我避开了它。如果没有更好的方法，那么是的，我可能最终会这样做。谢谢。我认为使用css3/sass/bourbon可以很容易地让它看起来很漂亮，这取决于你的css技能。我不会太担心在最终的html上有很多标记，因为它是生成的。与日历和表格相关：