jQuery UI Datepicker - Colour-coding dates in a calendar

jQuery UI Datepicker - Colour-coding dates in a calendar

I am using jQuery UI Datepicker in the conventional way for selecting dates. Now I also want to use it to display a calendar with some dates colour-coded according to certain characteristics.

The calendar is called on the page with
  1. <div id="calendar"></div>
and the script on the page (so far) is
  1. $(function() {
  2. $( "#calendar" ).datepicker({
  3. numberOfMonths: 4
  4. });
  5. });

The information about each date will come from a mySQL database. How can I put a different background colour on each date to show the different characteristic? Presumably I will be adding an extra class to something with CSS, a bit like this

  1. .open{background-color:yellow;}
  2. .closed{background-color:red:}

There will be 4 or 5 different background colours in total.

Obviously I need some more code in the script, but what?