垂直日ビュー時間ガントチャート/タイムライン（Outlookに似ています） - jQueryライブラリ

Question

1時間、30分、15分、または5分の増分で垂直のタイムラインチャートを作成する必要があります。この機能はOutlookまたは「Day-View」スケジューラに似ています。ここでは、予定がタイムライン上のボックスとして配置されます。

私は次のように考えられますが、以下のような問題があった：

• 、Googleの可視化は、Vis.JS - いくつかの - だけ水平タイムライン、垂直
• jQueryのFullCalendar.io、DayPilotをサポートしていませんプレミアムバージョンでのみ利用可能な機能は$ 500です。 FullCalendar：DayTimelineビューはプレミアムですDayPilot：1時間単位ではなくプレミアムです
• jQuery Skedulerのようなカスタムインターバルや真のDateオブジェクトをサポートしていないプリミティブフリーツール、私はルーラーを自分で再描画する必要があります。私自身

この問題に関するご意見はありますか？これにスプレッドシートを使用することはできますか？

目的の機能：追加

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

テンプレート

CodyHouseスケジュール：私が使用して容易に拡張し、簡単にこの無料のプラグインに落ち着いてきました

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

Answer 1

ズーム（カスタムインターバル）、カラーリングなどはとても簡単でした。 <LI>タグで構成されたHTMLベースのタイムラインがあり、その間隔は実際にHTMLラベルに基づいて自動的に計算されるため、何も自分で再計算する必要はありません。

新しいイベントをオンザフライ（主な機能）にプロットするには、このコードをmain.JSに追加しました。このコードは、既存のHTMLの通常の初期化を再現します。このRefreshは、新しいイベントに新しい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))); 
     }); 
    }   
}