垂直日视图小时甘特图/时间轴（类似于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))); 
     }); 
    }   
}