jQuery Datepicker beforeShowDay不工作

Question

我正在使用jQuery UI Datepicker来实现一个简单的日历。其中，我将ShowDay之前的回调函数设置为自定义函数，以便我可以突出显示不同类型的日子（工作日，银行假日等），但是我返回的类似乎不适用。这里是初始化日期选择器代码：

$('#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}]} 

当我运行页面，我得到相应的两个警报，告诉我，我通过IFS跑，所以返回的值应为：

return [true, 'nonworkingday']; 

在一种情况下和

return [true, 'modifiedworkingday']; 

另

（这是验证，因为我可以看到该警报在浏览器中弹出。

但是，日历中的这两天的风格与默认风格完全相同。我的CSS是这样的：

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

如果它的任何帮助，我用谷歌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 
    ] 
}; 

编辑：根据意见，如果你想覆盖的背景下，CSS应该是这样的：

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