InputManJSで仕事が捗る入力フォーム開発（5）日本の祝日に完全対応するカレンダー

2022年8月1日更新

「InputManJS（インプットマンJS）」は便利で快適な入力フォーム開発に特化したJavaScriptライブラリです。様々な用途に合わせて最適化された同ライブラリのインプットコントロールを活用することにより、入力ストレスの少ないWebフォームを効率的に実現することができます。

このシリーズではInputManJSに収録されている便利な機能やコントロールをピックアップしながら、開発者もシステム利用者も「仕事が捗る」入力フォームの開発TIPSをご紹介します。

2022年は祝日の当たり年

お正月が終わってしまいました。早速、次の連休が待ち遠しいですね。わたしと気持ちを同じくする皆さんへの朗報として、今年は祝日の当たり年なのだとか。

9回もある3連休に加えて、すべての祝日が土日とかぶらないそうです（祝日が土曜日だと振替休日にならないので「どうして！」って思いますよね）。2020年と2021年は東京オリンピック・パラリンピックなどの影響により祝日の大移動がありましたが、今年は一転してもっとも普通にそして最大限に祝日を謳歌できる1年になりそうです。

自在に休日を設定できるInputManJSのカレンダー

そんな嬉しい気持ちを抱えつつ、本日ご紹介するのはInputManJSのカレンダーに備わる休日の設定機能です。この年明けを機にエンジニアの皆さんには、日頃メンテナンスされている業務アプリケーションのカレンダー設定見直しをおすすめいたします。前述した祝日の大移動に対応するため、昨年、一昨年はカレンダーの休日設定を大幅に変更された方も多いかと思いますが、今度はそれを元に戻すタイミングです。

ここ2年ほどの大移動ではないにしろ、そもそもイレギュラーな法則によって決まるカレンダーの祝日設定は結構骨の折れる作業ですが、InputManJSのカレンダー機能なら簡単に対応が可能です。以降の項目ではInputManJSのカレンダーによる休日設定について詳しくご紹介していきます。

祝日設定の基本

InputManJSのカレンダーコントロール（GcCalendar）における祝日の設定では初めに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));

上記のHolidayGroupオブジェクトをカレンダーコントロール（GcCalendar）に追加すれば祝日設定は完了です。

// InputManJS カレンダーのインスタンスを生成します
var gcCalendar = new GC.InputMan.GcCalendar(document.getElementById('gcCalendar'));

// HolidayGroupオブジェクトをカレンダーコントロールに追加します
gcCalendar.addHolidayGroup(holidayGroup);

なおここまでのコードでは天皇誕生日を設定していません。天皇誕生日は年によってその日付が大きく変わる特殊な祝日です。2018年以前なら12月23日、2020年以降は2月23日が天皇誕生日になります。InputManJSでこのような表示に対応するためには上記でご紹介しているHolidayオブジェクトではなく、後述のForceHolidayオブジェクトを使用します。

不定期の祝日を設定する

前項では1年のうち固定で決まっている祝日の設定を行いました。一方で日本の祝日には、ハッピーマンデー制度などによる不定期の祝日がいくつもあるのでアプリケーションに実装するカレンダーではそれらも考慮しなくてはなりません。具体的には以下のような祝日を設定する必要があります。

ハッピーマンデー
春分の日、秋分の日
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));

その年だけの特別な祝日／平日を設定する

カレンダーでは時々、昨年、一昨年にあったような祝日の移動が発生する場合があります。また、業務上で利用するカレンダーとしては例えば、会社の設立記念日として平日が休日の扱いとなったり、あるいはシフト構成などの関係により、一般には休日とされる日が出勤日となるようなケースがあります。InputManJSのカレンダーには、このような場合に対応する機能が備えられており、以下のようにして対応します。

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

// 例：会社の設立記念日として平日を休日に設定します
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('設立記念日', '2022/4/1'));

// 平日用のHolidayGroupオブジェクトを生成します
var workdayGroup = new GC.InputMan.HolidayGroup('workday', true);

// 例：休日シフトとして2022年1月23日（日）を平日に設定します
workdayGroup.addHoliday(new GC.InputMan.ForceWorkday('', '2022/1/23'));

// 2つのHolidayGroupオブジェクトを追加します
gcCalendar.addHolidayGroup(holidayGroup);
gcCalendar.addHolidayGroup(workdayGroup);

今回のコードをデモで確認

今回ご紹介した設定をコード実装したデモを以下に示します。このデモでは土曜、日曜をそれぞれ青、赤のフォント色で表示の上、祝日を赤背景の強調表示で設定しています。また各月の祝日が一度に確認できるよう6ヶ月間を一括表示にしています。

さいごに

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

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

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