jQuery UI Datepicker - Adding an extra class to change colour

Question

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?

T J · Accepted Answer · 2014-11-07 06:10:46Z

1

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>

edited Nov 7, 2014 at 6:10

answered Nov 6, 2014 at 17:33

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TrapezeArtist Over a year ago

Thanks TJ. There's something very odd going on. It looked like all I had to do was modify the CSS. I did that and it didn't work. So I made a small test file by copying and pasting all of your code, and working from there. The jquery-ui.css and jquery-ui.js files you used didn't work at all, so I substituted my own. When I first open the page, 6 Nov is indeed red. Click on any other date and 6 Nov turns yellow (the colour-code for "today"). 6 No is a special case, so I changed the closedDates variable to a different day. Then it doesn't work at all.

TrapezeArtist Over a year ago

Continuing, bcause I ran out of space. I think the extra bit of CSS code you provided may only work on "today" and not any other date.

T J Over a year ago

@TrapezeArtist just hammer the default css with !important. Check the updated ans.

TrapezeArtist Over a year ago

Just one little word, but "!important" IS important. Problem solved. Thanks so much. You wouldn't believe how much pain this has given me in the last day or so.

Collectives™ on Stack Overflow

jQuery UI Datepicker - Adding an extra class to change colour

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related