I'm using the jQuery UI Datepicker to implement a simple calendar. In it I have the callback beforeShowDay to a custom function so I can highlight different types of days on it (working days, bank holidays and such), however, the classes I return don't seem to be applied. Here is the code to initialize the datepicker:
$('#jdatepicker').datepicker(
{
dateFormat: 'dd-mm-yyyy',
beforeShowDay: renderCalendarCallback,
onChangeMonthYear: onMonthChanged,
onSelect: onCalendarSelectedDate
}
);
This works and renderCalendarCallback is called and looks like this:
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, ''];
}
In this method, calendarDays has an array called days with some info on the days I need to highlight. For your information, here's the sample calendarDays I'm using:
{"days":[{"i":2,"dayType":2,"number":8},{"i":4,"dayType":3,"number":12}]}
When I run the page, I get the corresponding two alerts telling me I ran through the ifs, so the returned value should be:
return [true, 'nonworkingday'];
In one case and
return [true, 'modifiedworkingday'];
on the other (this is verified because I can see the alerts popping up in the browser.
However, both days in the calendar have exactly the same style as a default one. My CSS looks like this:
.nonworkingday {
background-color: #F7BE81 !important;
}
.modifiedday {
background-color: #F4FA58 !important;
}
.workingday {
background-color: #ACFA58 !important;
}
If it's any help, I used google chrome developer tools to inspect the generated table by the calendar and both the table divisions from days 8 and 12 look like this:
<td class=" " onclick="DP_jQuery_1290097799897.datepicker._selectDay('#jdatepicker',10,2010, this);return false;"><a class="ui-state-default" href="#">8</a></td>
Why is class empty? Shouldn't it have the class I returned from the callback? What am I doing wrong?
Thanks!
Works for me: http://jsfiddle.net/ryleyb/b6V3W/1/
So figure out what you've done differently. I did as @Pointy suggested and rearranged your calendarDays
object so that each array position represents a day of the month. That way you jump straight to the array position in your callback instead of having to go through it for every day.
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 : Based on the comments, if you want to override the background, the CSS should look like this:
.nonworkingday {
background: none !important;
background-color: #F7BE81 !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.