【jQuery】営業日・定休日カレンダーを簡単に管理する

楽天やYahoo!などのjQueryが使えるショッピングサイトで便利！営業日・定休日カレンダーを毎月○日とか毎週○曜日など休日設定が簡単に管理できるcal.jsの紹介です。

cal.jsを使う！
必要なファイルを準備する
楽天は外部リンクに注意
設定を変更する

楽天Tips関連記事

cal.jsを使う！

シンクグラフィカさんから無料配布されている営業日・定休日カレンダー(cal.js)を使います。
リンク先からダウンロードして下さい。
cal.jsは様々なカスタム機能があるのでとても使いやすいです！中でも祝日の設定がデフォルトで入っているのでほぼ放置でOKです！(2016年からの山の日(8/11)は対応してません)

営業日・定休日カレンダー

設置がやや大変ですが毎月○日とか毎週○曜日とかそういう指定と複数設置が簡単になったバージョンのカレンダーです。基本的な流れはステキカレンダーと同じですが、細部が調整されており、カスタマイズはしやすくなっていますが、設置作業にはちょっぴり知識が必要になったかもしれません。

必要なファイルを準備する

使うファイルは3つ。

cal.css
cal.js
index.html

使い方は3つのファイルを同じフォルダに入れてアップロードすれば問題なく動きます。
デザインのカスタムはcal.css、
機能のカスタムはcal.jsを変更すればできます。

楽天は外部リンクに注意

楽天GOLDに設置する場合は、cal.jsの変更が必須です！
変更箇所は76行目付近のcalObj[0].clickURI = 'http://www.yahoo.co.jp/?year=_YEAR_&month=_MONTH_&day=_DAY_';の部分を削除して下さい。
楽天以外の外部リンクは禁止されており、コメントアウトしてあるから大丈夫だろうと思っていたら警告が来ました！
cal.jsを楽天で使う場合は削除してから使ってください。

設定を変更する

この削除した部分の機能は下の部分に影響します。

// カレンダーをクリックできるようにする場合 (有効 : true / 無効 : false)
// クラス指定でURLが指定されている場合はそっちが優先されます。
calObj[0].click = false;

デフォルトで無効 : falseに設定されているので削除してもエラーがでて動かないという心配はありません。ただ、有効 : trueにして削除してしまうとカレンダーの機能が動かなくなるので注意して下さい。
有効にするとどう動作するかやってみた結果、yahooに飛ぶだけでした。このファイルの最終更新が2年前なのでおそらく当時は「今日は何の日」的な感じのページに飛べたのかなと思います。現在必要な設定ではないので削除してしまいましょう。

あとはcal.js内に注釈がたくさんあるのでそれに従ってカスタムするだけです！
私の場合、ほとんどの機能を消してあるので祝日対応カレンダーのようになってます。必要になったらちょっとカスタムするだけで使えるようになるのはとても便利ですね！