jQuery ui Datepickerに祝日を反映する

今更感はありますが、jQuery uiのDatepickerについて調べる機会がありましたので、記事にします。

祝日の配列を用意する

まずは祝日として取り扱い日付を配列として用意します。

    var holidays = ["20150101","20150112","20150211","20150321","20150429","20150503","20150504","20150505","20150506","20150720","20150921","20150922","20150923","20151012","20151103","20151123","20151223","20160101","20160111","20160211","20160320","20160321","20160429","20160503","20160504","20160505","20160718","20160811","20160919","20160922","20161010","20161103","20161123","20161223","20170101","20170102","20170109","20170211","20170320","20170429","20170503","20170504","20170505","20170717","20170811","20170918","20170923","20171009","20171103","20171123","20171223"];

『beforeShowDay』というオプションを利用する

こちらのオプションでは、一画面に表示することができるセル分 7日✕6週間=42日(回)ループ処理が走ります。
また引数で処理中の現在の日付が取得できます。

その引数と、用意した祝日の配列と一致したものに特定クラスを付与します。
該当のソースコードはこちら『editedDate』は、0パディングして2桁にしております。（Formatをyyyymmddにする）

  var editedDate = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' +  date.getDate()).slice(-2);

  if(~holidays.indexOf(editedDate)) {
    return [true, 'ui-datepicker-week-end'];
  }

  return [true, ''];

リターンの部分についてですが、

  return [boolean（true, false）, 'クラス名'];

・trueの場合は、クリックできる（able:活性）
・falseの場合は、クリックできない（disable:非活性）日付になります。
またその後の値がクラス名として付与されます。

その結果、以下のように祝日が反映されました。

結果

• 赤文字が土日祝日です。
• 線で囲ってあるセルが今日です。
• クリックして選択すると、背景に色がつきます。

よかった、よかった。

でも… 祝日のリストを手動で用意するのは大変ですね。
次回、PHPでGoogleCalendarの祝日情報を取得する方法をご紹介します。

Google Calender iCal形式のデータから、日本の祝日リストを自動生成する

【参考】
・jQuery ui Datepicker Widget
https://api.jqueryui.com/datepicker/