强大的甘特图拥有高达10种的日期模式

易度甘特图提供了10种日期模式，如下：

年/季，年/月，年/周，季/月，季/周，季/天，月/周，月/天，周/天

    默认的日期模式是“周/天”。

    在生成甘特图的时候，可以改变日期模式，如下：

project = Edo.create({    
    type: 'ganttview',
    dateView: 'year-week',  //日期模式
    width: 700,
    height: 400,        
    render: document.getElementById('example-view')
});    

    在创建完甘特图之后，可以在运行时切换 甘特图的日期模式，下面用一个按钮菜单来切换10种日期模式：

Edo.create({    
    type: 'box',
    render: document.getElementById('example-view'),
    children: [
        {
            type: 'group',
            cls: 'e-toolbar',                        
            layout: 'horizontal',
            children: [
                {
                    type: 'button',
                    id: 'dateviewBtn',
                    text: '日期 : 周/天',        
                    arrowMode: 'menu',
                    menu: [
                        {
                            type: 'button',
                            text: '年/季',
                             function(e){
                                project.set('dateView', 'year-quarter');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/月',
                             function(e){
                                project.set('dateView', 'year-month');
                                
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/周',
                             function(e){
                                project.set('dateView', 'year-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/天',
                             function(e){
                                project.set('dateView', 'year-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/月',
                             function(e){
                                project.set('dateView', 'quarter-month');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/周',
                             function(e){
                                project.set('dateView', 'quarter-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/天',
                             function(e){
                                project.set('dateView', 'quarter-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '月/周',
                             function(e){
                                project.set('dateView', 'month-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '月/天',
                             function(e){
                                project.set('dateView', 'month-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '周/天',
                             function(e){
                                project.set('dateView', 'week-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        }
                    ]
                }
            ]
        }
    ]
}); 

   注意：只有当" *-day "模式时，右侧条形图区域，才可以用鼠标拖拽调节任务的开始日期、完成日期和完成百分比。

转载于:https://blog.51cto.com/llinda2008/268748