確認した環境
使用するプラグイン
View Customize プラグインの設定
祝日マスタ
| パスのパターン | / | 
| 挿入位置 | 全ページのヘッダ | 
| 種別 | JavaScript | 
Holidays = {};
Holidays["2023"] = {
  "08-11":"山の日",
  "09-18":"敬老の日",
  "09-23":"秋分の日",
  "10-09":"スポーツの日",
  "11-03":"文化の日",
  "11-23":"勤労感謝の日",
};
Holidays["2024"] = {
  "01-08":"成人の日",
  "02-11":"建国記念の日",
  "02-12":"休日",
  "02-23":"天皇誕生日",
  "03-20":"春分の日",
  "04-29":"昭和の日",
  "05-03":"憲法記念日",
  "05-04":"みどりの日",
  "05-05":"こどもの日",
  "05-06":"休日",
  "07-15":"海の日",
  "08-11":"山の日",
  "08-12":"休日",
  "09-16":"敬老の日",
  "09-22":"秋分の日",
  "09-23":"休日",
  "10-14":"スポーツの日",
  "11-03":"文化の日",
  "11-04":"休日",
  "11-23":"勤労感謝の日",
};
祝日判定処理
| パスのパターン | /(calendar|gantt) | 
| 挿入位置 | 全ページのヘッダ | 
| 種別 | JavaScript | 
var isHoliday = function(year, month, day) {
    if (Holidays[year.toString()]) {
        var dateKey = ("0" + month).slice(-2) + "-" + ("0" +day).slice(-2);
        if (dateKey in Holidays[year]) {
            return true;
        }
        else {
            return false;
        }
    }
    else {
        return false;
    }
};
休日クラスを設定する処理
| パスのパターン | /gantt | 
| 挿入位置 | 全ページのヘッダ | 
| 種別 | JavaScript | 
$(function () {
    var year = Number($('#year').val());
    var month = Number($('#month').val());
    var months = Number($('#months').val());
    var zoom = Number($('#zoom').val());
    if (zoom >= 3) {
        var days = 0;
        for(i=0; i<months; i++) {
            days += new Date(year, month+i, 0).getDate();
        }
        var dateObj = new Date(year, month+months-1, 0);
        var eachCnt = 0;
        $($('#gantt_area .gantt_hdr').get().reverse()).each(function() {
            var $hdr = $(this);
            eachCnt += 1;
            if (eachCnt <= days) {
                if (zoom == 3) {
                    $hdr.addClass('day-' + dateObj.getDay());
                    if (isHoliday(dateObj.getFullYear(), dateObj.getMonth()+1, dateObj.getDate())) {
                        $hdr.addClass('nwday day-holiday');
                    }
                }
                else {
                    $hdr.addClass('day-transparent');
                }
            }
            else if (eachCnt <= days*2) {
                if (zoom == 3) {
                }
                else {
                    $hdr.addClass('day-' + dateObj.getDay());
                    if (isHoliday(dateObj.getFullYear(), dateObj.getMonth()+1, dateObj.getDate())) {
                        $hdr.addClass('nwday day-holiday');
                    }
                }
            }
            if (eachCnt == days) {
                dateObj = new Date(year, month+months-1, 0);
            }
            else {
                dateObj = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate()-1);
            }
        });
    }
});
休日の背景色設定
| パスのパターン | /gantt | 
| 挿入位置 | 全ページのヘッダ | 
| 種別 | CSS | 
#gantt_area .gantt_hdr.day-0 {
    background-color: rgba(102, 153, 204, .2)!important;
}
#gantt_area .gantt_hdr.day-6 {
    background-color: rgba(102, 153, 204, .2)!important;
}
#gantt_area .gantt_hdr.day-holiday {
    background-color: rgba(102, 153, 204, .2)!important;
}
#gantt_area .gantt_hdr.day-transparent {
    background-color: transparent!important;
}
以上です!
       
      
      
      
コメント