休日を設定する方法について解説します。
休日スタイルの設定
休日スタイルは、CSSの[calendar-holiday-type]セレクタで設定します。日付の文字色、背景色、太字、下線などのスタイルを指定できます。
休日の追加
休日を追加するには、以下の手順を実行します。
HolidayGroupオブジェクトを作成します。
Holidayオブジェクトを作成します。
HolidayGroupオブジェクトのaddHolidayメソッドでHolidayオブジェクトを追加します。
GcCalendarコントロールのaddHolidayGroupメソッドでHolidayGroupオブジェクトを追加します。
休日は、Holidayオブジェクトで設定します。このHolidayオブジェクトは、次の５つの設定メソッドを持っています。
setName
setStartMonth
setStartDay
setEndMonth
setEndDay
setNameメソッドには、休日を識別するための名前を設定し、setStartMonthとsetStartDayの２つのメソッドには休日の開始日を、また、setEndMonthとsetEndDayの各メソッドには休日の終了日を指定します。コンストラクタの引数でこれらの値を指定することもできます。
また、ハッピーマンデーと呼ばれる祝日など、特定の月、週、曜日を指定して設定する休日は、DayOfWeekHolidayオブジェクトで設定します。このDayOfWeekHolidayオブジェクトは、次の４つの設定メソッドを持っています。
setDayOfWeek
setDayOfWeekInMonth
setMonth
setName
setNameメソッドには、休日を識別するための名前を設定し、setMonthには休日を設定する月、setDayOfWeekInMonthには週、setDayOfWeekには曜日を指定します。コンストラクタの引数でこれらの値を指定することもできます。
臨時の休日と営業日
上記で使用したHolidayおよびDayOfWeekHolidayオブジェクトでは、休日が毎年繰り返されます。一方で、特定の年だけに行われる休日もあります。また、春分の日と秋分の日は、年によってその日付が異なります。
このように、特定の年にしか適用できないものや、年によって日付が異なるものについては、HolidayオブジェクトではなくForceHolidayオブジェクトを使用します。
また、Holidayオブジェクトで設定された休日にも関わらず、その年だけは営業日になるということもあります。このような場合、ForceWorkdayオブジェクトを使うことで、Holidayオブジェクトを削除することなく、臨時に営業日に設定することが可能です。
以下は、「休日スタイルの生成」で設定した誕生日（3月6日）を2015年に限って臨時営業日（仕事）にし、翌日を臨時休日（代休）に設定する例です。
振替休日
国民の祝日が日曜日に重なったとき、「翌日（休日か営業日か問わず）」もしくは「次の営業日」を休日にするというシステムに対応して、カレンダーコントロールには、この振替休日を自動的に設定する機能があります。
振替休日は、HolidayCollectionのWeekdaysプロパティを経由してDayOfWeekHolidayPolicyオブジェクトにアクセスすることで、設定できます。以下にその例を示します。
休日の確認
HolidayオブジェクトのisHolidayメソッドを使うと、特定の日付が休日（営業日でない日）に設定されているかどうかを確認することができます。isHolidayメソッドがtrueを戻すのは、以下の３種類の日です。
臨時営業日でない休日
臨時休日
休業日
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'));
const holidayGroup = new InputMan.HolidayGroup('holiday', true);
const workdayGroup = new InputMan.HolidayGroup('workday', true);
// 振替休日を有効にします
holidayGroup.setWeekFlags('sunday', InputMan.WeekFlags.All);
holidayGroup.setOverride('sunday', InputMan.HolidayOverride.NextWorkDay);
// 振替休日用のツールチップテキスト
gcCalendar.setOverrideTipText('振替休日');
// 固定の祝日
holidayGroup.addHoliday(new InputMan.Holiday('元旦', 1, 1));
holidayGroup.addHoliday(new InputMan.Holiday('建国記念の日', 2, 11));
holidayGroup.addHoliday(new InputMan.Holiday('昭和の日', 4, 29));
holidayGroup.addHoliday(new InputMan.Holiday('憲法記念日', 5, 3));
holidayGroup.addHoliday(new InputMan.Holiday('みどりの日', 5, 4));
holidayGroup.addHoliday(new InputMan.Holiday('こどもの日', 5, 5));
holidayGroup.addHoliday(new InputMan.Holiday('文化の日', 11, 3));
holidayGroup.addHoliday(new InputMan.Holiday('勤労感謝の日', 11, 23));
// ハッピーマンデー
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('成人の日', InputMan.MonthFlags.January, InputMan.WeekFlags.Second, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('海の日', InputMan.MonthFlags.July, InputMan.WeekFlags.Third, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('敬老の日', InputMan.MonthFlags.September, InputMan.WeekFlags.Third, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('体育の日', InputMan.MonthFlags.October, InputMan.WeekFlags.Second, InputMan.DayOfWeek.Monday));
// 2019年のみの祝日
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', '2019/4/30'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇の即位の日', '2019/5/1'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', '2019/5/2'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('即位礼正殿の儀', '2019/10/22'));
// 2020年のみの祝日
holidayGroup.addHoliday(new InputMan.ForceHoliday('海の日', '2020/7/23'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('スポーツの日', '2020/7/24'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('山の日', '2020/8/10'));
// 2020年のみ平日扱い
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/7/20'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/8/11'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/10/12'));
// 2021年のみの祝日
holidayGroup.addHoliday(new InputMan.ForceHoliday('海の日', '2021/7/22'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('スポーツの日', '2021/7/23'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('山の日', '2021/8/8'));
// 2021年のみ平日扱い
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2021/7/19'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2021/8/11'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2021/10/11'));
// 年により変動のある祝日を設定します。
// 2000年から2050年までを対象としています。
for (var currentYear = 2000; currentYear <= 2050; currentYear++) {
var syunbun;
var syubun;
switch (currentYear % 4) {
case 0:
// 春分の日を設定します。
if (currentYear < 1960) syunbun = currentYear + '/3/21';
else if (currentYear >= 1960 && currentYear < 2092) syunbun = currentYear + '/3/20';
else syunbun = currentYear + '/3/19';
// 秋分の日を設定します。
if (currentYear < 2012) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 1:
// 春分の日を設定します。
if (currentYear < 1993) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1921) syubun = currentYear + '/9/24';
else if (currentYear >= 1921 && currentYear < 2045) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 2:
// 春分の日を設定します。
if (currentYear < 2026) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1950) syubun = currentYear + '/9/24';
else if (currentYear >= 1950 && currentYear < 2078) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 3:
// 春分の日を設定します。
if (currentYear < 1927) syunbun = currentYear + '/3/22';
else if (currentYear >= 1927 && currentYear < 2059) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1983) syubun = currentYear + '/9/24';
else syubun = currentYear + '/9/23';
break;
}
// 春分の日、秋分の日を追加します。
holidayGroup.addHoliday(new InputMan.ForceHoliday('春分の日', syunbun));
holidayGroup.addHoliday(new InputMan.ForceHoliday('秋分の日', syubun));
// 2016年以降「山の日」を追加します。
if (currentYear > 2016) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('山の日', currentYear + '/8/11'));
}
// 天皇誕生日を追加します。
if (currentYear < 2019) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇誕生日', currentYear + '/12/23'));
}
else if (currentYear > 2019) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇誕生日', currentYear + '/2/23'));
}
// 2つの祝日に挟まれた営業日を休日に設定します。
if (currentYear > 2003) {
const syubunDate = new Date(syubun);
if (syubunDate.getDay() == 3) {
syubunDate.setDate(syubunDate.getDate() - 1);
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', syubunDate));
}
}
}
gcCalendar.addHolidayGroup(holidayGroup);
gcCalendar.addHolidayGroup(workdayGroup);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>カレンダーコントロール - 休日の設定</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div id="gcCalendar"></div>
</body>
</html>
/* 休日のスタイル */
[calendar-holiday-type] {
color: red;
}
/* 休日のスタイル */
[gcim-control-appearance="modern"] [calendar-holiday-type] {
color: red;
}
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
