2020年の祝日大移動にも対応！InputManJSのカレンダーで祝日表示

ゴールデンウィークが終わってしまいましたね・・・。次の連休が待ち遠しいですが、6月は祝日も無いし、先は遠い・・・。

さて、祝日といえば、先日公開した以下の記事でもご紹介した通り、2019年～2020年は、改元と東京オリンピックの影響で、その年限りのイレギュラーな祝日が続きます。

今回は入力支援JavaScriptコントロールセット「InputManJS（インプットマンJS）」を使用して、2020年までの特別な祝日に対応したカレンダーをWebアプリ上に表示する方法をご紹介したいと思います。

カレンダーコントロールの祝日設定の基本
ハッピーマンデー？日本の祝日は複雑！
その年だけの祝日／平日に対応するには？
おわりに

カレンダーコントロールの祝日設定の基本

InputManJSのカレンダーで祝日のスタイルを設定するには、以下のような手順になります。

HolidayGroupオブジェクトを作成する
Holidayオブジェクトを作成する
HolidayGroupオブジェクトのaddHolidayメソッドでHolidayオブジェクトを追加する
GcCalendarコントロールのaddHolidayGroupメソッドでHolidayGroupオブジェクトを追加する

コードで書く必要があるので大変そうに見えますが、実際にはサンプルのコードをコピーするだけで、想像以上に簡単に済みます。

また、祝日の定義（ HolidayGroupオブジェクト）は一度作成してしまえば、複数のカレンダーコントロールや日付時刻コントロールのドロップダウンカレンダーの間で共有して使用することもできます。

まずはHolidayGroupオブジェクトを作成し、

var holidayGroup = new GC.InputMan.HolidayGroup('holiday', true);

祝日をHolidayオブジェクトとして定義し、先ほど作成したHolidayGroupオブジェクトに追加していきます。

holidayGroup.addHoliday(new GC.InputMan.Holiday('元旦', 1, 1));
holidayGroup.addHoliday(new GC.InputMan.Holiday('建国記念の日', 2, 11));
holidayGroup.addHoliday(new GC.InputMan.Holiday('昭和の日', 4, 29));
holidayGroup.addHoliday(new GC.InputMan.Holiday('憲法記念日', 5, 3));
holidayGroup.addHoliday(new GC.InputMan.Holiday('みどりの日', 5, 4));
holidayGroup.addHoliday(new GC.InputMan.Holiday('こどもの日', 5, 5));
holidayGroup.addHoliday(new GC.InputMan.Holiday('文化の日', 11, 3));
holidayGroup.addHoliday(new GC.InputMan.Holiday('勤労感謝の日', 11, 23));

カレンダーコントロール（GcCalendar）にHolidayGroupオブジェクトを追加します。

gcCalendar.addHolidayGroup(holidayGroup);

ハッピーマンデー？日本の祝日は複雑！

以上で設定完了！と言いたいところですが、みなさまもうお気づきですかね。そう、祝日が全然足りません。

というのも、日本の祝日には毎年固定でない祝日がいくつもあるので、それらを考慮しなくてはなりません。具体的には以下のようなものがあります。

ハッピーマンデー
春分の日、秋分の日
2016年以降の山の日（2015年以前は平日にしなくてはいけない）
振替休日

InputManJSにはこれらに対応するための様々な機能が用意されています。例えば振替休日を自動で有効化するには以下のように設定します。

// 振替休日を有効にします
holidayGroup.setWeekFlags('sunday', GC.InputMan.WeekFlags.All);
holidayGroup.setOverride('sunday', GC.InputMan.HolidayOverride.NextWorkDay);
// 振替休日用のツールチップテキスト
gcCalendar.setOverrideTipText('振替休日');

またハッピーマンデーにも専用のオブジェクトとしてDayOfWeekHolidayオブジェクトが用意されているので、こちらを使います。

// ハッピーマンデー
holidayGroup.addHoliday(new GC.InputMan.DayOfWeekHoliday('成人の日', GC.InputMan.MonthFlags.January, GC.InputMan.WeekFlags.Second, GC.InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new GC.InputMan.DayOfWeekHoliday('海の日', GC.InputMan.MonthFlags.July, GC.InputMan.WeekFlags.Third, GC.InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new GC.InputMan.DayOfWeekHoliday('敬老の日', GC.InputMan.MonthFlags.September, GC.InputMan.WeekFlags.Third, GC.InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new GC.InputMan.DayOfWeekHoliday('体育の日', GC.InputMan.MonthFlags.October, GC.InputMan.WeekFlags.Second, GC.InputMan.DayOfWeek.Monday));

その年だけの祝日／平日に対応するには？

冒頭でも述べたように、2019年～2020年には以下のような特別な祝日が発生します。

2019年

名称	日付	備考
休日	4月30日	「国民の祝日」に挟まれた平日は休日
休日（祝日扱い）	5月1日	天皇即位の日
休日	5月2日	「国民の祝日」に挟まれた平日は休日
休日（祝日扱い）	10月22日	即位礼正殿の儀の行われる日

2020年

名称	日付	備考
天皇誕生日	2月23日	2020年以降祝日
海の日	7月23日	本来は7月20日
スポーツの日	7月24日	旧体育の日。本来は10月12日
山の日	8月10日	本来は8月11日

参考：内閣府 – 平成３１年（２０１９年）及び平成３２年（２０２０年）の「国民の祝日」

これらを特別な祝日として設定するほか、本来海の日、スポーツの日（旧体育の日）、山の日となる日を2020年に限っては平日として扱うよう考慮する必要もあります。

その年だけの特別な祝日／平日を設定するには、それぞれForceHolidayオブジェクトとForceWorkdayオブジェクトを使用します。また、平日の設定用にもう１つHolidayGroupオブジェクトを用意する必要があります。

// 平日用のHolidayGroupオブジェクト
var workdayGroup = new GC.InputMan.HolidayGroup('workday', true);
// 2019年のみの祝日
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('国民の休日', '2019/4/30'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('天皇の即位の日', '2019/5/1'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('国民の休日', '2019/5/2'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('即位礼正殿の儀', '2019/10/22'));
// 2020年のみの祝日
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('海の日', '2020/7/23'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('スポーツの日', '2020/7/24'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('山の日', '2020/8/10'));
// 2020年のみ平日扱い。平日用のHolidayGroupオブジェクトに追加する
workdayGroup.addHoliday(new GC.InputMan.ForceWorkday('', '2020/7/20'));
workdayGroup.addHoliday(new GC.InputMan.ForceWorkday('', '2020/8/11'));
workdayGroup.addHoliday(new GC.InputMan.ForceWorkday('', '2020/10/12'));
・
・
// 2つのHolidayGroupオブジェクトを追加
gcCalendar.addHolidayGroup(holidayGroup);
gcCalendar.addHolidayGroup(workdayGroup);

その他、春分／秋分の日、山の日、天皇誕生日もForceHolidayオブジェクトを使用して定義できます。詳細なコードは製品サイトで公開しているデモアプリケーションをご覧ください。（実行可能なソースもこちらからダウンロードできます。）

すべてを設定すると、以下のように2019年～2020年の祝日に対応したカレンダーが表示されます。こちらの例ではカレンダーコントロールと、日付時刻コントロールのドロップダウンカレンダーで共通の祝日設定を使用しています。

おわりに

いかがでしたでしょうか。コードを並べると複雑そうにも見えますが、実際にやってみるとすごく簡単に設定できます。

InputManJSのカレンダーはこの他にも、和暦や六曜といった日本固有の表記や、複数月の表示や外観のカスタマイズなど、お客様の求めるカレンダーを実現するための機能が豊富に用意されていますので、ぜひトライアル版やデモアプリケーションで実際の動作をお試しください。

このほか、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記までお気軽にお問合せください。

＼この記事をシェアする／