I'm using jQuery UI's datepicker ().

It sounds like it should be possible to mark certain days by providing a beforeShowDay function (). 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?

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

It sounds like it should be possible to mark certain days by providing a beforeShowDay function (http://docs.jquery./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?

• javascript
• jquery
• css
• jquery-ui

2 Answers 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.

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>.