jQuery Datepicker beforeShowDay не работает

Question

Я использую jQuery UI Datepicker для реализации простого календаря. В нем у меня есть callback beforeShowDay для пользовательской функции, поэтому я могу выделить различные типы дней на ней (рабочие дни, праздничные дни и т. Д.), Однако классы, которые я возвращаю, похоже, не применяются. Вот код для инициализации DatePicker:

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

Это работает и renderCalendarCallback называется и выглядит следующим образом:

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}]} 

Когда я запускаю страницу, я получаю соответствующие два предупреждение говорило мне, что я побежал через МФС, поэтому возвращаемое значение должно быть:

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; 
}