jQuery DatePicker beforeShowDay not working

Question

私はjQuery UI Datepickerを使って簡単なカレンダーを実装しています。その中で私はカスタム関数にコールバックbeforeShowDayを持っていますので、私はその日の曜日（銀行休日など）を強調することができますが、返されるクラスは適用されないようです。これは動作しrenderCalendarCallbackが呼び出され、次のようになります

$('#jdatepicker').datepicker(
     { 
      dateFormat: 'dd-mm-yyyy', 
      beforeShowDay: renderCalendarCallback, 
      onChangeMonthYear: onMonthChanged, 
      onSelect: onCalendarSelectedDate 
     } 
    ); 

：：ここでは日付ピッカー初期化するためのコードであり、この方法では

function renderCalendarCallback(date) { 
    if (initialLoad) return [true, '']; 
    $.each(
     calendarDays.days, 
     function (intIndex, objValue) { 
      if (objValue.number == date.getDate()) { 
       if (objValue.dayType == NonWorkingDay) { 
        alert('nonworkingday - ' + date.getDate()); 
        return [true, 'nonworkingday']; 
       } 
       else if (objValue.dayType == ModifiedWorkingDay) { 
        alert('modifiedday - ' + date.getDate()); 
        return [true, 'modifiedday']; 
       } 
       else if (objValue.dayType == WorkingDay) { 
        alert('workingday - ' + date.getDate()); 
        return [true, 'workingday']; 
       } 
      } 
    }); 
    //Here for the default days 
    return [true, '']; 
} 

は、calendarDaysは日にいくつかの情報との日と呼ばれる配列を持っています私は強調する必要があります。あなたの詳細については、ここで私が使用しているサンプルcalendarDaysです：

{"days":[{"i":2,"dayType":2,"number":8},{"i":4,"dayType":3,"number":12}]} 

私はページを実行すると、私が対応する二つのアラートは、私がIFSを駆け抜けた私に言ってもらうため、返される値は次のようになります。

1の場合

return [true, 'nonworkingday']; 

と私は警告がブラウザにポップアップ見ることができるので、これは検証され、他の上の

return [true, 'modifiedworkingday']; 

（。

しかし、カレンダーの両方の日付は、デフォルトの日付とまったく同じです。私のCSSは次のようになります。

.nonworkingday { 
    background-color: #F7BE81 !important; 
} 
.modifiedday { 
    background-color: #F4FA58 !important; 
} 
.workingday { 
    background-color: #ACFA58 !important; 
} 

それは任意のヘルプだ場合、私はカレンダーによって生成されたテーブルを検査するためにGoogle Chromeの開発ツールを使用して、テーブル8日から分裂し、このような12の外観の両方：

<td class=" " onclick="DP_jQuery_1290097799897.datepicker._selectDay('#jdatepicker',10,2010, this);return false;"><a class="ui-state-default" href="#">8</a></td> 

なぜクラスが空ですか？私はコールバックから戻ったクラスを持っていないはずですか？私は間違って何をしていますか？

ありがとうございます！私にとって

Answer 1

作品：http://jsfiddle.net/ryleyb/b6V3W/1/

ですから、違っやったかを把握。 @PointyがあなたのcalendarDaysオブジェクトを提案して再配置したので、各配列の位置がその月の日を表すようにしました。そうすれば、コールバックの配列の位置に、毎日行くのではなく、まっすぐジャンプすることができます。

var calendarDays = { 
    days: [ 
    undefined, undefined, 
    { 
     "dayType": WorkingDay, 
     "i": 5}, // <-- this is in position 2 in the array, so it represents day 2 
    undefined, undefined, undefined, undefined, 
    { 
     "dayType": NonWorkingDay, 
     "i": 9}, // <-- position 7, 7th of the month 
    { 
     "dayType": ModifiedWorkingDay, 
     "i": 1} // <-- 8, etc 
    ] 
}; 

EDIT：あなたが背景を上書きしたい場合は、コメントに基づき、CSSは次のようになります。

.nonworkingday { 
    background: none !important; 
    background-color: #F7BE81 !important; 
}