I am currently working on customizing the appearance of specific dates within a jQuery UI datepicker. If a date is considered a holiday (meaning it matches a date in an array of specified holiday dates), I want to remove the default styling and make some minor adjustments to that particular element. To mark holidays, I assign a "holiday" class to these dates using the beforeShowDay callback function, similar to how weekends are marked with a "weekend" class:
beforeShowDay: function(oDate) {
mResult = oHolidays.fnLookupDate(oDate);
if (mResult != null)
return [false, 'holiday', mResult];
else if (oDate.getDay() == 0 || oDate.getDay() == 6)
return [false, 'weekend'];
else
return [true, ''];
}
In theory, adding a class to holiday dates should allow me to define unique styles for each holiday in the datepicker. However, the CSS styles defined in the class do not take effect; the default UI styling seems to override them. To address this issue, one solution would be to modify the CSS styles in the UI file directly, but this approach is not recommended from a design perspective. Here is the CSS I have defined (using !important did not resolve the issue):
td.holiday {
background-color: #CC9900;
background-image: none;
color: #990000;
font-weight: bolder;
}
I attempted a workaround by applying the CSS as inline styles to the anchor elements within the td nodes generated by the datepicker, hoping that more specific rules would take precedence:
onChangeMonthYear: function(dateText, inst) {
$('.holiday').children('a').css({'background-color': 'blue', 'background-image': 'none',
color: '#990000', 'font-weight': 'bolder'});
}
However, it appears that the onChangeMonthYear function executes before the datepicker is displayed, causing the datepicker's css to override my custom styling attempts. When running this code in Firebug while the datepicker is open, it works correctly.
Is there a way to use .css() to update the datepicker's css after a month is displayed? I prefer to avoid modifying the jQuery UI files directly, as it is not ideal from a design standpoint. Are there any other suggestions or alternatives?