Modify jquery datepicker CSS with beforeShowDay

Question

I am using beforeShowDay and have assined the class specialDay to particular days in my calendar this works fine, however i am having trouble understanding how to style the class and how the css from theme roller is working in general. I have tried:

td .specialDate { background: #33CC66; }

but this has no affect on the look of the calendar, any ideas?

Answer 1

Whenever i'm using the JQuery UI stuff I use Firebug to check out any styles being applied to particular elements, this will enable you to easily identify which CSS elements you need to play with.

Answer 2

I had the same problem, fortunately i found the answer. When you disable a day (set to "false") is valid to assign a class (".specialDate") to change the background color, but not if the date is enabled, because we have another styled anchor ("a") that overrides the class assigned to "td" anchor.

So, if your date is enabled to select and want to change the styles, you have to edit the inherited "a" anchor, like this:

.specialDate a { background: #33CC66 !important; }

It's very important that you add the "!important" (if you'll forgive the repetition) indication in order to override other settings.

Hope this can help!

Answer 3

.specialDate span {background-color:#ff0000!important;}

if you want to disable transparency effect

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}