日付選択のdatepickerにスケジュールを反映する
2013年7月19日（金）〜20日（土）に師崎荘にて行われましたa-blog cms の合宿で、発表しましたdatepickerのカレンダーに、スケジュールモジュールで登録した内容を反映する方法を紹介します。
手順
/js/config.js を変更
//--------------------
// 日付選択カレンダー
dpicMark : 'input:text[name$=date], .js-datepicker', // セレクタの指し示す要素をクリックで日付選択カレンダーを利用出来ます
dpicConfig :
{
closeText : '閉じる',
prevText : '<前月',
nextText : '次月>',
currentText : '今日',
monthNames : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
monthNamesShort : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
dayNames : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
dayNamesMin : ['日','月','火','水','木','金','土'],
dateFormat : 'yy-mm-dd',
firstDay : 0,
isRTL : false,
beforeShow : function (inst) { set_datepicker(0,0,inst) },
onChangeMonthYear : function(year,month,inst){ set_datepicker(year,month,inst) },
},最後の2行、beforeShow,onChangeMonthYearの行が追加されています。
beforeShowは、カレンダーのモーダルが表示される前に実行されるfunctionを定義しています。
onChangeMonthYearは、カレンダーのモーダルで月送りをした場合に実行されるfunctionを定義しています。
その他にも使えるfunctionがあります。詳しくはAPI配布元のドキュメントを確認してください。jQuery Datepicker Widget
set_datepickerは自作するfunction名です。
set_datepickerを作成
set_datepickerのfunctionを定義します。記述する場所は自由ですが、例えば/themes/テーマ名/js/datepicker.js などにして、HTMLから参照できるようにパスを通してください。
function set_datepicker(year,month,inst){
var param_y = year;
var param_m = month;
var param = '';
// 入力欄に年月日が登録されている場合
if( ( year == 0 || month == 0 ) && ( $(inst).size() > 0 ) ){
date = $(inst).val().split("-");
param_y = date[0];
param_m = date[1];
}
// 年月送りではなく、未入力の場合は現在の日付を利用する
if( param_y == null || param_y == "" || param_y == "undefined" )param_y = "0";
if( param_m == null || param_m == "" || param_m == "undefined" )param_m = "0";
var date = new Date();
if( param_y == "0" ){
param_y = date.getFullYear();
}
if( param_m == "0" ){
param_m = date.getMonth() + 1;
}
// 月の0詰め
if( ! ( param_m.toString().length > 1 ) ) {
param_m = "0" + param_m;
}
param = "/"+param_y+"/"+param_m+"/";
// AjaxによるJSONデータ取得とセット
$.getJSON("/ajax/holiday.json"+param, function(json) {
for(var i in json){
if( json[i].class.toString().length > 1 ){
$('.ui-state-default ').each( function(){
if( $(this).html() == i ){
$(this).removeClass('ui-state-default');
$(this).addClass( json[i].class.toString() );
}
});
}
}
$('#ui-datepicker-div').append('<p class="strongA">※赤くぬられた日は休診日です</p>');
});
}JavaScriptの詳しい説明は省きますが、必要な年月をURLコンテキストで指定してJSON形式でデータを受け取り、該当する日付にclassを設定しています。
注釈は直接埋め込んでいます。
holiday.jsonを作成
<!-- BEGIN_MODULE Plugin_Schedule id="holidayScheduleJson" -->{<!-- BEGIN unit:loop --><!-- BEGIN month:loop --><!-- BEGIN week:loop --><!-- BEGIN day:loop --><!-- BEGIN day:veil -->
"{day}":{<!-- END day:veil -->
"class":"<!-- BEGIN plan -->{class}[urlencode]<!-- END plan -->"
},<!-- END day:loop --><!-- END week:loop --><!-- END month:loop --><!-- END unit:loop -->
"99":{
"class":0
}
}<!-- END_MODULE Plugin_Schedule -->99は正常なJSON形式にするためのダミーデータで意味はありません。
モジュール設定では特殊な設定は行なっておりません。
