GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

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

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉ではエンジニア経験者を幅広く募集しています。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。