Mark selected days in jQuery UI datepicker

Question

I'm using jQuery UI's datepicker (http://docs.jquery.com/UI/Datepicker).

It sounds like it should be possible to mark certain days by providing a beforeShowDay function (http://docs.jquery.com/UI/Datepicker#event-beforeShowDay). But I can't get the CSS right for this. I'd like to make the background green for some days.

This is the JavaScript I have this far:

$(function() {    
    $('.date').datepicker({
        dateFormat: 'yy-mm-dd',
        firstDay: '1',
        showOtherMonths: 'true',
        beforeShowDay: daysToMark
    });
});

function daysToMark(date) {
    if (date.getDate() < 15) {
        return [true, 'markedDay', ""];
    }

    return [true, '', ""];
}

And this is the css:

.markedDay {
    background-color: green;
}

But nothing changes. What am I doing wrong?

Answer 1

What you have should work, you can test it here. However, depending on your theme, you may need to tweak your CSS, as the <a> inside the <td> has a background of it's own, and the class gets applied to the <td>.

Answer 2

This did it

.markedDay a.ui-state-default {
    background: green !important;
}

.markedDay a.ui-state-hover {
    background: red !important;
}

Had to add the styling to the a element and not the td element, as pointed out by Nick Craver. I also had to add the jQuery UI generated class name to the a element to make my css rule more important than the default one according the CSS cascading rules. The final trick was to use background instead of background-color to override the jQuery UI theme image that was used.