垂直日视图小时甘特图/时间轴(类似于Outlook)-jQuery库 [英] Vertical Day-View Hour Gantt Chart/Timeline (Similar to Outlook) - jQuery Library

问题描述

我需要创建一个垂直的时间轴"图表，其增量为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 [...][..]

解决方案

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

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)));
        });
    }           
}

I need to create a vertical "Timeline" chart with increments of 1 hour, 30 min, 15 min, or 5 min. The functionality is similar to Outlook or a 'Day-View' Scheduler, where appointments are placed as boxes on a timeline.

I considered the following but there were problems as below:

• Google Visualization, Vis.JS - horizontal timeline only, vertical not supported
• jQuery FullCalendar.io, DayPilot - some features only available in a Premium version that costs $500. FullCalendar: DayTimeline View is premium, DayPilot: non-1hr increments are premium
• Primitive free tools such as jQuery Skeduler that don't support any custom intervals or true Date objects, I would have to redraw the ruler myself, or implement overlaps myself

Any suggestions on this issue? Can I even use a spreadsheet for this?

Desired functionality:

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

解决方案

I've settled on this free plugin which is easily extendable and easy to use:

CodyHouse Schedule Template

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

Adding zooming (custom intervals), coloring, etc. was really easy. There is an HTML-based timeline consisting of <LI> tags and the interval is actually automatically calculated based on your HTML labels, so you don't need to re-calculate anything yourself.

To plot new events on the fly (the main functionality) I added this code in their main.JS, which replicates their normal initialization of pre-existent HTML. This Refresh is called after I manually modify the DOM by adding a new LI for a new event.

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库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！