日付選択のdatepickerにスケジュールを反映する

この記事は公開日より10年以上経過しているため、現在の内容と異なる可能性があります。

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形式にするためのダミーデータで意味はありません。

モジュール設定では特殊な設定は行なっておりません。


同じタグ付けがされている記事