休日の設定

休日を設定する方法について解説します。 休日スタイルの設定 休日スタイルは、CSSの[calendar-holiday-type]セレクタで設定します。日付の文字色、背景色、太字、下線などのスタイルを指定できます。 休日の追加 休日を追加するには、以下の手順を実行します。 HolidayGroupオブジェクトを作成します。 Holidayオブジェクトを作成します。 HolidayGroupオブジェクトのaddHolidayメソッドでHolidayオブジェクトを追加します。 GcCalendarコントロールのaddHolidayGroupメソッドでHolidayGroupオブジェクトを追加します。 休日は、Holidayオブジェクトで設定します。このHolidayオブジェクトは、次の5つの設定メソッドを持っています。 setName setStartMonth setStartDay setEndMonth setEndDay setNameメソッドには、休日を識別するための名前を設定し、setStartMonthとsetStartDayの2つのメソッドには休日の開始日を、また、setEndMonthとsetEndDayの各メソッドには休日の終了日を指定します。コンストラクタの引数でこれらの値を指定することもできます。 また、ハッピーマンデーと呼ばれる祝日など、特定の月、週、曜日を指定して設定する休日は、DayOfWeekHolidayオブジェクトで設定します。このDayOfWeekHolidayオブジェクトは、次の4つの設定メソッドを持っています。 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を戻すのは、以下の3種類の日です。 臨時営業日でない休日 臨時休日 休業日
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; 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> System.import('./src/app'); </script> </head> <body> <div id="gcCalendar"></div> </body> </html>
/* 休日のスタイル */ [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: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/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' }, } });