Question

I’m using JQuery to display a calendar (datepicker).

I’ve disabled weekends easily and then I’ve tried to disable national days.

So here a sample of code:

function checkHolidays(date, holidaysArray) {
    for (var i = 0; i < holidaysArray.length; ++i) {
        if (date.getMonth() == holidaysArray[i][0].getMonth()
            && date.getDate() == holidaysArray[i][0].getDate()) {
            return ([false, 'holiday', holidaysArray[i][1]]);
        }
    }
    return [true, ''];
}

This is working. But I want to change the color of the cell (the ‘holiday’ css property) and this is not working. Because I’m setting the day as disabled, the holiday css property is not applied.

But if I do not disable the date, i.e:

return ([true, 'holiday', holidaysArray[i][2]]);

The css property is working. Got any idea?

Edit:

I’ve updated my css rule to:

.holiday, .ui-datepicker .holiday span
{
     background: none #FFEBAF;
     border: 1px solid #BF5A0C;
}

And now it’s working perfectly.

This post helped me: How to change cell color

Answer 1

You may find these useful:

jQuery UI DatePicker: Disable Specified Days

jQuery UI: Highlight multiple dates in jquery datepicker

Disable date