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

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

営業日・定休日カレンダーの概要

なるべく柔軟に更新せずにい営業日や定休日、イベントや商品発送予定日などの告知をわかりやすくカレンダー形式とリスト表示で告知するためのスクリプトです。 class指定の他に説明文やURLを指定することもできます。設置方法は2.x系と少し変わりましたがDOMを使って半永久的にめくることができる点などは変わっていません。

営業日・定休日カレンダーの機能

日曜日以外の曜日から開始できる
カレンダーは基本的に一番左が日曜日ですが、一番左を月曜日にすることなどができます。
パラメータを付けてクリック
年・月・日などのパラメータを付けて特定のURLへジャンプさせるための機能を付けました。クリック可能な日付はclass名で指定するか、あるいはすべての日付かどっちかです。
日付でクラス指定
○年○月○日といった固定の日付に対してクラス指定や説明文、URLを指定することができます。
大雑把な日付でクラス指定
○月○日といった大雑把な日付に対してクラス指定や説明文、URLを指定することができます。
○日後でクラス指定
1日後とか3日後とかでクラス指定や説明文指定ができます。当日から計算するためECサイト等の発送予定日などを告知するのに便利かもしらんね。
毎月○日でクラス指定
毎月○日にクラスや説明文を指定できます。毎月1日はお客様大感謝祭!みたいな使い方ですかね?
毎週○曜日でクラス指定
毎週火曜日は定休日です。なんつー時に利用できますね。たぶん。
第○ ×曜日でクラス指定
要望が多かった第2、第4火曜日は定休日!なんつー時に利用できます。
○月の第△ ×曜日でクラス指定
祝日を登録するために追加しました。
過去の日付にクラス指定
当日より前の日付に対して一括でクラス指定ができるようになったドン
初期表示月の指定
○ヶ月後って感じで初期表示のカレンダー月を指定できるようになったドン
複数設置がより簡単に
ほんとアレですよね。今までの仕様がわかりづらすぎたって話ですよね。ホント生まれてきてすいません。
リスト表示
リスト表示用のタグを配置すると、表示している月に説明文が付いている日付はリストに表示されるゾ
説明文を指定・表示
上記の各条件時に設定されるclass指定に加えてポップアップ表示する説明文を設定することもできます。色分けだけだとわかりづらいしね。
リンクを指定
上記の各条件時に設定されるclass指定に加えてリンクを指定することができるゾ。イベントの詳細表示などにどうぞ。みたいなね。なんつってね!

デモサイト

https://lab.synck.com/Cal3.0/

最新版を無料ダウンロード

営業日・定休日カレンダーの更新履歴

更新日 バージョン 更新内容
2020-05-17 3.4.8 クリックを不許可にするためのクラス名を指定できるようになったバージョンを公開しました。
2019-12-26 3.4.7 日曜日以外の曜日から開始できるような設定を追加しました。
2014-08-05 3.4.5 予定リスト関連のバグを修正したバージョンを公開。
2014-03-24 3.4.4 予定リストが更新されないバグを修正したバージョンを公開。
2013-02-12 3.4.3 曜日指定の優先順位を変更。
2012-10-23 3.4.0 うるう年を計算しているのに反映されない致命的なバグを修正しました(ほんとごめんなさい生まれてきて)。
2012-07-03 3.3.0 MSIEの場合、ポップアップを非表示にしました(居なくなっちゃえばいいのにMSIEなんて)。
2012-05-16 3.2.0 第○土曜日を指定した時のバグを修正した3.2.0を公開
2012-05-05 3.1.0 特定のclassが指定された日付、あるいはすべての日付をパラメータを付けてクリック可能にできるようにした3.1.0を公開
2012-04-16 3.0.1 ○月の第○週の○曜日に対応した3.0.1を公開
2012-04-14 3.0.0 刷新した3.0.0を公開
2009-05-09 2.2.0 2.2を公開?

コメント欄

2022-07-29 15:12:13mohmohさん
お世話になります。月が替わる○日前になったら翌月のカレンダ表示(例えば8月1日の5日前の7月26日になったら翌月8月のカレンダーを表示)といった設定は難しいでしょうか?
2022-07-30 08:47:17和田さん
カスタマイズ次第でできなくはないと思います!
calObj.date = new Date();
calObj.date = new Date(calObj.date.getFullYear() + "/" + (calObj.date.getMonth() + 1) + "/" + calObj.date.getDate() + " 00:00:00");

と書いている部分でカレンダーを表示している日を起算しているため、この部分をズラすることで、例えばX日以降の場合は翌月とする、みたいな処理を挟むとおそらくご希望の動作になると思います。
2024-05-15 13:49:56momoさん
お世話になります。
六曜の表示をさせることは難しいでしょうか。
2024-05-15 19:50:57和田さん
現状、六曜を表示させる機能はついておりません。頑張って開発すればつけれるとは思いますが、そこそこ費用はかかると思います。
2024-05-27 12:26:31ななさん
これをwordpressに入れて、不定休に対応することは可能でしょうか?
2024-05-27 18:28:35和田さん
可能だとは思いますが、休日はあくまでコードベースで指定する必要があるとは思います。カスタマイズ次第ではできると思いますが。
2024-06-26 14:09:20くまこさん
カレンダー自体の大きさは変えられないのでしょうか?
2024-06-27 21:22:07和田さん
CSSで調整可能です。
2024-11-12 19:39:51難波さん
今日の日付を取得して、今日のカレンダーを表示していますが、今日の日付を2024/1/1に固定できないでしょうか?
calObj[1].defaultMonth = 1; //翌月から表示ってことね。
calObj[2].defaultMonth = 2; //翌月から表示ってことね。
calObj[3].defaultMonth = 3; //翌月から表示ってことね。
として、12か月固定で表示させたいです。
2024-11-12 19:51:47和田さん
calObj.date = new Date();
という部分を
calObj.date = new Date("2024/04/01 00:00:00");
とすることで、うまくいけば固定できるかもしれません。できないかもしれません。
2024-11-13 07:53:41難波さん
出来ました!感動です!