日本の祭日などに対応するデートピッカー “jQuery MyCalendar”
こちらの記事で自作デートピッカーの記事を書いたのですが、 配布して欲しいとの要望が何件か有りましたので、配布用に調整したものをご紹介致します。
デフォルト
とりあえずカレンダーを表示するだけの設定です。テキストフォームのidはユニークにして下さい。
1 2 | <input type="text" class="mycld1" id="day1" readonly> <input type="text" class="mycld1" id="day2" readonly> |
1 2 3 | $(function(){ $(".mycld1").myCalendar();}); |
日本語化と日付フォーマット変更
曜日を日本語化し、テキストフォームに入力される日付のフォーマットを変更します。
1 2 | <input type="text" class="mycld2" id="day3" readonly> <input type="text" class="mycld2" id="day4" readonly> |
1 2 3 4 5 6 | $(function(){ $(".mycld2").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' });}); |
開始日と終了日を指定する
一定期間だけ選択させたい場合などに開始日と終了日を設定します。
1 2 | <input type="text" class="mycld3" id="day5" readonly> <input type="text" class="mycld3" id="day6" readonly> |
1 2 3 4 5 6 7 8 | $(function(){ $(".mycld3").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' ,start:'today' //今日から開始の場合'today' 指定の場合は 'yyy-mm-dd' ,end:'2015-05-10' });}); |
曜日や指定日をクリック不可にする
曜日(o~6)や指定日を配列で指定し、クリック不可にします。定休日などに。
1 2 | <input type="text" class="mycld4" id="day7" readonly> <input type="text" class="mycld4" id="day8" readonly> |
1 2 3 4 5 6 7 8 | $(function(){ $(".mycld4").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' ,holidayweek:'0,6' ,holiday:['20150127','20150215','20150309'] });}); |
Google Calendaer APIから日本の祭日を取得して反映する
Googleから日本の祭日を取得しますので、少し重くなります。
1 2 | <input type="text" class="mycld" id="day1" readonly> <input type="text" class="mycld" id="day2" readonly> |
1 2 3 4 5 6 7 | $(function(){ $(".mycld").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' ,gholiday:true });}); |
カレンダーをブラウザへ表示する
カレンダーは絶対位置で表示されるので、幅や高さなど余裕をもって枠を作って下さい。
1 | <div id="browse_calendar" style="height: 250px; width: 210px;"></div> |
1 2 3 4 5 6 | $(function(){ $("#browse_calendar").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,display:'browse' });}); |
指定したファイルへ日付をGETで渡す
リンクさせたいファイル名やパラメーター名、フォーマットを指定します。
1 | <div id="browse_calendar" style="height: 250px; width: 210px;"></div> |
1 2 3 4 5 6 7 8 9 10 | $(function(){ $("#browse_calendar").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,start:'today' ,display:'browse' ,GetLink:'GetLink.php' ,LinkFormat:'yy-mm-dd' ,LinkParam:'?ymd=' });}); |
大きなカレンダーで祭日名などを表示する
CSSでカレンダーを大きめにして祭日名を表示してします。
1 | <div id="browse_calendar" style="height: 600px; width: 440px; background:#FFFFFF;"></div> |
1 2 3 4 5 6 7 8 | $(function(){ $("#browse_calendar").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,display:'browse' ,DayText:true ,gholiday:true });}); |
番外編:
Googleから取得している祭日を独自に記述する例です。
calendar.php
1 2 3 4 5 6 7 8 9 10 11 | header("Content-type: application/xml");echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n";echo '<xml>'."\n"; // ここから -------------------------------------echo ' <item>'."\n"; echo " <date>".date('Ymd')."</date>\n"; echo " <title>今日ですよ</title>\n"; echo ' </item>'."\n"; // ここまでを必要に応じて書き加える ---------------echo '</xml>'."\n"; |
Google Calendar APIから取得する場合も、このようなXMLにしますので、それを手書きで書くだけです。例は今日を指定していますが、幾つでも指定可能です。PHPですので、例えばデータベースと連動しても良いと思います。なお、jQueryMyCalendarからは表示しているカレンダーの年と月をGETで渡しています。?y=xxxx&m=xx
その他
jQuery.datepickerはこの他に年を選択出来たりしますが、その辺りは対応させていません。また、以下のような使い方が出来ません。
1 2 3 4 5 6 7 8 9 | $(function(){ $(".mycld1").myCalendar();});$(function(){ $(".mycld2").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' });}); |
１つのページで複数のフォーマットを使いたいといったケースです。そのうち対応させるかもしれませんが、仕様上ちょっと難しいです。
あと、jQuery.datepickerはページをロードした時点で表示しているコードのみに適用されるのに対し、My Claendarはそれに縛られません。例えばjQueryで挿入したHTMLコードなどにも適用されます。
カレンダーに文字を表示出来るので、例えば空室案内などにも使えるかもしれません。
