[Redmine 5.1] ガントチャートに祝日を表示する方法

スポンサーリンク
スポンサーリンク

確認した環境

スポンサーリンク

使用するプラグイン

スポンサーリンク

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;
}

以上です!

コメント

タイトルとURLをコピーしました