dhtmlxScheduler - タイムライン : ツリーモード

タイムラインのツリーモードを選べば開閉式のタイムラインが使える

リファレンス : http://docs.dhtmlx.com/scheduler/timeline_view.html#datafortheyaxissectionsinthetreemode

JS読み込み : dhtmlxscheduler_timeline.js dhtmlxscheduler_treetimeline.js

• nameには"timeline"を指定
• y_unit内のopenで開閉の有無
• y_unit内のchildrenで子要素
• y_propertyでデータとマッピングするプロパティ名を設定
• renderには"tree"を指定

var sections=[
    {key:"production", label:"Production Department", open:true, children:[
        {key:"p1", label:"Managers", open:true, children:[
            {key:"pm1", label:"John Williams"},
            {key:"pm2", label:"David Miller"}
        ]},
        {key:"p2", label:"Linda Brown"},
        {key:"p3", label:"George Lucas"}
    ]},
    {key:"sales", label:"Sales and Marketing", open:true, children:[
        {key:"s1", label:"Kate Moss"},
        {key:"s2", label:"Dian Fossey"}
    ]}
];

scheduler.createTimelineView({
    section_autoheight: false,
    name:   "timeline",
    x_unit: "minute",
    x_date: "%H:%i",
    x_step: 30,
    x_size: 24,
    x_start: 16,
    x_length:   48,
    y_unit: sections,
    y_property: "section_id",
    render: "tree",
    folder_dy:20,
    dy:60
});

・・・

scheduler.parse([
    { start_date: "2009-06-30 09:40", end_date: "2009-07-01 12:00", text:"Task A-12458", section_id:"pm2"},
    { start_date: "2009-06-30 10:00", end_date: "2009-06-30 21:00", text:"Task A-89411", section_id:"pm1"},
    { start_date: "2009-06-30 10:00", end_date: "2009-07-01 14:00", text:"Task A-64168", section_id:"p2"},
    { start_date: "2009-07-01 12:00", end_date: "2009-07-02 18:00", text:"Task D-12458", section_id:"p2"}
],"json");