垂直日視圖小時甘特圖/時間軸（類似於Outlook） - jQuery Library

Question

我需要創建一個垂直「時間軸」圖表，增量爲1小時，30分鐘，15分鐘或5分鐘。該功能與Outlook或「日視圖」日程安排類似，其中約會作爲時間軸上的框放置。

我認爲以下，但有如下問題：

• 谷歌可視化，Vis.JS - 只有橫向時間軸，縱不支持
• jQuery的FullCalendar.io，DayPilot - 一些功能只能在500美元的高級版本中使用。 FullCalendar：DayTimeline視圖是溢價，DayPilot：非1hr增量溢價
• 原始免費工具，如jQuery Skeduler，不支持任何自定義間隔或真正的Date對象，我將不得不自己重繪標尺，或實現重疊我自己

對此問題有何建議？我甚至可以爲此使用電子表格嗎？

所需的功能：

CodyHouse計劃模板

https://codyhouse.co/gem/schedule-template/

添加：

8:00 --------- 
8:30 [.......] 
9:00 --------- 
9:30 [...][..] 

Answer 1

我已經在這個免費的插件，它是易於擴展和易於使用的解決縮放（自定義間隔），着色等非常簡單。有一個基於HTML的時間軸由<LI>標籤組成，實際間隔時間是根據您的HTML標籤自動計算的，因此您無需自行重新計算任何內容。

爲了實時繪製新事件（主要功能），我在main.JS中添加了這段代碼，它複製了它們對原先存在的HTML的正常初始化。在我通過爲新事件添加新的LI來手動修改DOM之後調用此刷新。

function refreshScheduler() { 
    schedules = $('.cd-schedule'); 
    objSchedulesPlan = [], 
     windowResize = false; 

    if(schedules.length > 0) { 
     schedules.each(function(){ 
      //create SchedulePlan objects 
      objSchedulesPlan.push(new SchedulePlan($(this))); 
     }); 
    }   
}