Question

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!

Answer 1

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