確認した環境
使用するプラグイン
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;
}
以上です!
コメント