垂直日视图小时甘特图 Chart/Timeline（类似于 Outlook）- jQuery 库

Question

我需要创建一个垂直 "Timeline" 图表，增量为 1 小时、30 分钟、15 分钟或 5 分钟。该功能类似于 Outlook 或 'Day-View' 调度程序，其中约会作为时间轴上的框放置。

我考虑了以下但存在以下问题：

Google 可视化，Vis.JS - 仅水平时间轴，不支持垂直
jQuery FullCalendar.io、DayPilot - 某些功能仅在售价 500 美元的高级版中提供。 FullCalendar：DayTimeline View 是高级的，DayPilot：非 1 小时的增量是高级的
原始的免费工具，例如 jQuery 不支持任何自定义间隔或真正的 Date 对象的 Skeduler，我将不得不自己重绘标尺，或者自己实现重叠

关于这个问题有什么建议吗？我什至可以为此使用电子表格吗？

所需功能：

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

Answer 1

我已经选择了这个易于扩展且易于使用的免费插件：

CodyHouse 时间表模板

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

添加缩放（自定义间隔）、着色等非常简单。有一个基于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)));
        });
    }           
}

垂直日视图小时甘特图 Chart/Timeline（类似于 Outlook）- jQuery 库

Vertical Day-View Hour Gantt Chart/Timeline (Similar to Outlook) - jQuery Library

jquery

charts

timeline

visualization

calendar