Q:

jQuery UI Datepicker - Adding an extra class to change colour

I am using jQuery UI Datepicker to present a calendar. Drawing data from a mySQL database I want to show some dates in a different colour.
The calendar is placed on the page with
<div id="calendar"></div>

The script is
$(function() {
var closedDates = <?php echo json_encode($closedarray); ?>;
    function closed(date) {
        ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);

        if ($.inArray(ymd, closedDates) < 0 ) {
            return [true, "", "Available"];
        } else {
            return [true, "closed", "Closed"];
        }
    }

    $('#calendar').datepicker({
        beforeShowDay: closed, 
        dateFormat: 'dd-mm-yy',
        numberOfMonths: 4
    });
});

By default, ThemeRoller puts an image on each date cell but I don't need that so I have simplfied the CSS to just put a plain colour on the cell. (I've also rolled that back to see if I had created the problem with this change but it is no different.)
According to the Datepicker documentation, "beforeShowDay" returns an array which includes "a CSS class name to add to the date's cell or "" for the default presentation". That class name is "closed" in my example. So then I put an extra line in the CSS:
.closed { background:red }

However instead of colouring the main cell red, it just puts a small red border around it.
How on earth is this supposed to work?

A:

The class will be applied to the <td>. The <a> inside the <td> has another background, mostly hiding the background of <td>.
Just change your CSS selector to target the <a> inside as follows:

$(function() {
  var closedDates = ["2014-11-06"];

  function closed(date) {
    ymd = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
    console.log(ymd)
    if ($.inArray(ymd, closedDates) < 0) {
      return [true, "", "Available"];
    } else {
      return [true, "closed", "Closed"];
    }
  }

  $('#calendar').datepicker({
    beforeShowDay: closed,
    dateFormat: 'dd-mm-yy'
  });
});
.closed a {
  background: red !important;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="calendar"></div>

