WEB GANTT甘特圖製作系列教材之項目日曆

簡單的項目日曆

比如，有一個項目日曆是這樣的：星期1、星期3、星期5是工作日，其他是非工作日。

我們需要這樣處理：

//甘特圖項目日曆背景
dataGantt.isWorkingDate = function(date){
    var day = date.getDay();
    if(day == 1 || day == 3 || day == 5) return true;
    else return false;
}

效果圖如下：

這裏的關鍵在於控制Edo.data.DataGantt對象的isWorkingDate方法返回值，它接受一個日期參數，如果範圍true，表示是工作日，甘特圖會顯示白色背景；如果返回false，表示是非工作日，顯示灰色網格背景。

標準的項目日曆

一個實際的項目日曆可能是這樣的：星期六、星期日是非工作日，其他星期天是工作日；可以定義一個日期範圍爲工作日，也可以把以人日期範圍定義爲非工作日。

我們來處理這樣一個項目日曆，代碼如下：

//定義一個項目日曆數據對象,規定了一些基本工作日與非工作日範圍
/*
    type: 1爲通用日期,0爲例外日期
    work: 1工作日,0非工作日
    day: 星期日 0, 星期一 1... 星期六 6
*/
var Calendar = [
    {type: 1,work: 0,day: 0},   //星期日:非工作日
    {type: 1,work: 1,day: 1},
    {type: 1,work: 1,day: 2},
    {type: 1,work: 1,day: 3},
    {type: 1,work: 1,day: 4},
    {type: 1,work: 1,day: 5},
    {type: 1,work: 0,day: 6},   //星期六:非工作日
    //從 2009年1月28日 到 2009年2月1號爲非工作日
    {type: 0,work: 0,start: new Date(2009, 0, 28),finish: new Date(2009, 1, 1)},
    //從 2009年2月38 到 2009年2月18號爲工作日
    {type: 0,work: 1,start: new Date(2009, 1, 8),finish: new Date(2009, 1, 18)}    
]
dataGantt.isWorkingDate = function(date){
    var day = date.getDay();
    var time = date.getTime();
    
    //先處理是否包含在例外日期中(例外日期優先級高)    
    for(var i=0,l=Calendar.length; i<l; i++){
        var d = Calendar[i];        
        //如果包含在例外日期範圍中
        if(d.type == 0 && time >= d.start.getTime() && time <= d.finish.getTime()){
            return d.work;
        }
    }
    //後處理通用星期天邏輯
    for(var i=0,l=Calendar.length; i<l; i++){
        var d = Calendar[i];
        //如果星期天一樣
        if(d.type == 1 && d.day == day){
            return d.work;
        }
    }
}

效果圖如下：

本教程給出了一個規範的項目日曆數據結構，用戶可以擴展這個項目日曆數據結構，爲其構建一個項目日曆調節設置面板，從而達到修改甘特圖日曆背景的目的。

 

更多詳細信息，請登錄網站：

http://www.edogantt.com

http://www.edojs.com