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