可用性日曆jQuery（？）

首先，我非常感謝任何輸入。我不是要求你爲我做這件事，我只是想知道你的想法，以最好的方式來處理這個項目。請看下面的圖片：
可用性日曆jQuery（？）

enter image description here

道歉的德國話是，重要的翻譯如下：

verfügbar=可用
bereits reserviert =已預留
Uhrzeit =時間slot
aktuelle Woche =本週
和Mo，Di，Mi等都是本週日子的縮短。

我會盡快解釋它應該做什麼，因爲圖片沒有真正解釋一切。這基本上是在「某人」全天可用時顯示。數據將被拉爲JSON併爲每個用戶動態顯示並列出兩週。我們正在進行的一週，以及未來的一週。

無論如何，我會直截了當地就你的意見採取行動。我最初的想法是：Unix時間戳，找到時間差異並將其轉換爲像素以用作每個div的高度。但是後來讓我覺得我無法知道div應該從哪裏開始。（也許它開始於10點就像在圖片上，我將如何確定）

我想過在畫布上做這件事，但是Canvas的經驗很少，所以我避免了這種情況。如果你會推薦它，儘管如此。我正在尋找理想的解決方案。

只要知道要學什麼對我來說是一個很大的幫助，任何輸入都會被感激地接受！

謝謝您的時間，
彼得

編輯：對不起，我忘了提那些事，感謝指出了這一點：

保留時間數據也將被拉到，用戶可以自行決定無論這段時間是否有空或無法使用。我不確定在同一天有兩個酒吧是多麼複雜。例如：06:00至12:00不可用，但可在12:00至18:00之間使用。所以我暫時避免這種情況。

時間間隔爲15分鐘。對於每15分鐘9px應該/可以被添加到高度。

感謝您的回覆。

來源

2012-07-09 Peter

怎麼辦你會發現是否有人可用？ – 2012-07-09 15:08:35

關於您在這裏談論多少「單位」？小時，半小時，分鐘..從某個小時+分鐘的角度來看，這裏使用的可用性是多少？ – Luceos 2012-07-09 15:18:44

感謝您的意見，我更新了我的帖子並提供了更多信息。 – Peter 2012-07-09 15:51:04

你可以做到<table>和聰明的css造型...每個<td>是15分鐘和9px高度。第一個和最後一個包含開始/結束時間。我有一些類似的要求和解決它與表和CSS後，我檢查了http://www.project-open.org/的演示，他們有時使用表顯示日曆/里程碑數據。此外，谷歌日曆使用表：https://www.google.com/calendar/

來源

2012-07-09 16:01:33 tmaximini

是的，這是另一個想法，我在這裏發現了類似的東西：https://www.studirent.com/content/studirent
然而，我不喜歡它看起來多麼俗氣，我想過要多少標記在網頁上......我避開了它。如果沒有更好的方法去做，那麼是的，我可能最終會這樣做。謝謝。 – Peter 2012-07-11 15:26:48

我認爲用css3/sass/bourbon，你可以很容易地使它看起來不錯，這取決於你的css技能。我不必擔心在最終的html上有很多標記，因爲它無論如何都會生成。 – tmaximini 2012-07-12 13:36:35

這jQuery的插件可能是值得考慮的 https://github.com/themouette/jquery-week-calendar

看起來像它採用表（S）的組合的div進行佈局

來源

2012-08-13 21:35:01 sotto

與日曆和表格相關：http://stackoverflow.com/questions/10059400/should-a-calendar-by-代表-使用-A-表爲什麼 - 確實，谷歌日曆，只有美國 – sotto 2012-08-13 21:52:01

可用性日曆jQuery（？）

回答

相關問題