Question

我需要创建一个垂直的“时间轴”图表，增量为1小时30分钟，15分钟或5分钟。该功能类似于Outlook或“日视图”计划程序，其中约会作为时间轴上的框放置。

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

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

有关此问题的任何建议吗？我甚至可以使用电子表格吗？

所需功能：

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之后调用此Refresh。

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

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

垂直日视图时间甘特图/时间线（类似于Outlook） - jQuery库

1 个答案: