Highlight the first day of each month in jQuery-ui Datepicker

Question

I've had to make some modifications to my CSS for the jQuery datepicker. Unfortunately, along the way I have managed to have the first of EVERY month highlighted. What property do I need to look for? I have to remove styling from TODAY's date to perform other CSS. That I have been able to do. But I do not want this side effect....

Here is the line I added:

.ui-datepicker-current .ui-datepicker-today .ui-state-highlight { background: transparent !important;}

Answer 1

You can use the beforeShowDay event for this. The primary function of this event is to enable or disable specific date(s) on the calendar. However, it can also be used to assign a special class to specific dates:

$(".datepicker").datepicker({
    beforeShowDay: function(date) {
        return [true, date.getDate() == 1 ? "first-class" : ""];
    }
});

Demo here