jQuery UI DatePicker: override today css

Question

I am using beforeShowDay to highlight special days in my jQuery datepicker. The only way I am able to change the background is to use the '!important' tag in my css class. This works perfectly for all days except 'today'. The css does not change the background color, only the border.

my css:

.genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}

Answer 1

You could try qualifying the selector further.

For example:

body contentDiv .genEvent a
{
    border:solid 1px #DC143C !important;
    background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}

If that works you may be able to remove the other !important, which is worth avoiding as it's a bit of an antipattern.

Answer 2

I found this here... might be of some help to you.

Why don't u use datepickers functionality to highlight special days? I use an inline datepicker as well and showing special days works just fine. I use something similar to:

$("#mnu_calendar").datepicker({
  ... other options
  beforeShowDay: function(thedate) {
    var theday    = thedate.getDate();
    if( $.inArray(theday,specialDays) == -1 )
      return [true,""];
    return [true, "specialDate"];
  },
  ... more options
});

specialsDays is my array with special days in this month e.g. [3, 12, 24]. "specialDate" is the CSS class name datepicker will add to the special days, so you can make them look anyway you want