Redmineのカレンダーとガントチャートに祝日表示を行う

Redmineのカレンダーとガントチャートをカスタマイズして祝日表示を行ってみました。

環境

Environment:
 Redmine version: 4.1.1.stable.19984
Redmine plugins:
 view_customize: 2.8.0

祝日定義(JS)

/*
パスのパターン: /(calendar|gantt)
プロジェクトのパターン:
挿入位置: 全ページのヘッダ
種別: JavaScript
*/
var myHolidays = {};
myHolidays["2021"] = ["01-01", "01-11", "02-11", "02-23", "03-20", "04-29", "05-03", "05-04", "05-05", "07-22", "07-23", "08-08", "08-09", "09-20", "09-23", "11-03", "11-23"];

var isMyHoliday = function(year, month, day) {
    if (myHolidays[year.toString()]) {
        var dateKey = ("0" + month).slice(-2) + "-" + ("0" +day).slice(-2);
        if (myHolidays[year].indexOf(dateKey) != -1) {
            return true;
        }
        else {
            return false;
        }
    }
    else {
        return false;
    }
};

カレンダーの祝日判定(JS)

/*
パスのパターン: /calendar
プロジェクトのパターン:
挿入位置: 全ページのヘッダ
種別: JavaScript
*/
$(function () {
    var year = Number($('#year').val());
    var month = Number($('#month').val());
    $('table.cal').find('td').each(function () {
        var $td = $(this);
        if ($td.hasClass('week-number') || $td.hasClass('odd')) {
            return true;
        }
        var day = Number($td.find('p.day-num').text());
        var dateObj = new Date(year, month-1, day);
        $td.addClass('day-' + dateObj.getDay());
        if (isMyHoliday(dateObj.getFullYear(), dateObj.getMonth()+1, dateObj.getDate())) {
            $td.addClass('nwday day-holiday');
        }
    });
});

カレンダーの祝日デザイン(CSS)

/*
パスのパターン: /calendar
プロジェクトのパターン:
挿入位置: 全ページのヘッダ
種別: CSS
*/
.cal td.day-0 {
    background-color: rgba(255, 138, 128, .2)!important;
}
.cal td.day-6 {
    background-color: rgba(130, 177, 255, .2)!important;
}
.cal td.day-holiday {
    background-color: rgba(255, 138, 128, .2)!important;
}

ガントチャートの祝日判定(JS)

/*
パスのパターン: /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 (isMyHoliday(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 (isMyHoliday(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);
            }
        });
    }
});

ガントチャートの祝日デザイン(CSS)

/*
パスのパターン: /gantt
プロジェクトのパターン:
挿入位置: 全ページのヘッダ
種別: CSS
*/
#gantt_area .gantt_hdr.day-0 {
    background-color: rgba(255, 138, 128, .2)!important;
}
#gantt_area .gantt_hdr.day-6 {
    background-color: rgba(130, 177, 255, .2)!important;
}
#gantt_area .gantt_hdr.day-holiday {
    background-color: rgba(255, 138, 128, .2)!important;
}
#gantt_area .gantt_hdr.day-transparent {
    background-color: transparent!important;
}