JQuery Datepicker Background Color For Cells Based On Event Type

I need to show non available dates in different color based on the event type or if it is full booked for that day. Below example fetches dates from database and i pass them as an

Solution 1:

From the fine manual:

beforeShowDay

A function that takes a date as a parameter and must return an array with:

• [0]: true/false indicating whether or not this date is selectable
• [1]: a CSS class name to add to the date's cell or "" for the default presentation
• [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

So there's no room in the return value for a specific color. However, element one of the array can contain multiple class names so you can do it through CSS.

If you wanted a particular holiday to come out in red text then you could do this in your beforeShowDay:

return [false, 'holiday red', holiDays[i][3]];

and then add a tiny bit of CSS:

td.red span.ui-state-default {
    color: #f00;
}

to make the red class do something.

Demo: http://jsfiddle.net/ambiguous/pjJGf/