楽天やYahoo!などのjQueryが使えるショッピングサイトで便利!営業日・定休日カレンダーを毎月○日とか毎週○曜日など休日設定が簡単に管理できるcal.jsの紹介です。
楽天Tips関連記事
楽天スマホで使える!classを使わずにcssを適用する裏技
指定時間に自動タイマーで切り替わる!楽天のバナーをcsvで管理する【jQuery】
jQueryで現在の日付で判別し、対象期間中だけテキストを表示する
cssだけ!jQueryを使わないスマホでよくある横から出てくるドロワーメニュー
【RMS】楽天スマホに禁止タグのiframeを入れる裏技
【jQuery】営業日・定休日カレンダーを簡単に管理する
jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける
jQueryで現在の時刻を判別し、表示するバナーを切り替える
jQueryでiframe内から親ページをリダイレクトさせる
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内に注釈がたくさんあるのでそれに従ってカスタムするだけです!
私の場合、ほとんどの機能を消してあるので祝日対応カレンダーのようになってます。必要になったらちょっとカスタムするだけで使えるようになるのはとても便利ですね!
コメント