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

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

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

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

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

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

  1. HolidayGroupオブジェクトを作成する
  2. Holidayオブジェクトを作成する
  3. HolidayGroupオブジェクトのaddHolidayメソッドでHolidayオブジェクトを追加する
  4. 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日

参考:内閣府 – 平成31年(2019年)及び平成32年(2020年)の「国民の祝日」

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

その年だけの特別な祝日/平日を設定するには、それぞれForceHolidayオブジェクトとForceWorkdayオブジェクトを使用します。また、平日の設定用にもう1つ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のカレンダーはこの他にも、和暦や六曜といった日本固有の表記や、複数月の表示や外観のカスタマイズなど、お客様の求めるカレンダーを実現するための機能が豊富に用意されていますので、ぜひトライアル版やデモアプリケーションで実際の動作をお試しください。