How to add custom CSS properties to datepicker days with beforeShowDay?

Question

I know how to add CSS classes to specific days with beforeShowDay, but I have no idea how to add an individual CSS property. I'm trying to color specific days with a hex value, and I don't know what those will be ahead of time so I can't just have classes for all of them.

Answer 1

Consider the following example.

$(function() {
  var classSize = {
    "04192021": 12,
    "04202021": 2,
    "04212021": 20,
    "04222021": 6,
    "04232021": 4,
    "04262021": 9
  };
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var dateString = $.datepicker.formatDate("mmddyy", date);
      var result = [
        date.getDay() == 0 || date.getDay() == 6 ? false : true,
        "blue-0",
        "0 Students Attending"
      ];
      if (classSize[dateString]) {
        result[1] = "blue-" + classSize[dateString];
        result[2] = classSize[dateString] + " Students Attending";
      }
      return result;
    }
  });
});

.ui-datepicker td.blue-0 a {
  background-color: #FFFFFF;
}

.ui-datepicker td.blue-1 a {
  background: #EFEFFF;
}

.ui-datepicker td.blue-2 a {
  background: #DFDFFF;
}

.ui-datepicker td.blue-3 a {
  background: #CFCFFF;
}

.ui-datepicker td.blue-4 a {
  background: #BFBFFF;
}

.ui-datepicker td.blue-5 a {
  background: #AFAFFF;
}

.ui-datepicker td.blue-6 a {
  background: #9F9FFF;
}

.ui-datepicker td.blue-7 a {
  background: #8F8FFF;
}

.ui-datepicker td.blue-8 a {
  background: #7F7FFF;
}

.ui-datepicker td.blue-9 a {
  background: #6F6FFF;
}

.ui-datepicker td.blue-10 a {
  background: #5F5FFF;
  color: #fff;
}

.ui-datepicker td.blue-11 a {
  background: #4F4FFF;
  color: #fff;
}

.ui-datepicker td.blue-12 a {
  background: #3F3FFF;
  color: #fff;
}

.ui-datepicker td.blue-13 a {
  background: #2F2FFF;
  color: #fff;
}

.ui-datepicker td.blue-14 a {
  background: #1F1FFF;
  color: #fff;
}

.ui-datepicker td.blue-15 a {
  background: #0F0FFF;
  color: #fff;
}

.ui-datepicker td.blue-16 a {
  background: #0E0EFF;
  color: #fff;
}

.ui-datepicker td.blue-17 a {
  background: #0D0DFF;
  color: #fff;
}

.ui-datepicker td.blue-18 a {
  background: #0B0BFF;
  color: #fff;
}

.ui-datepicker td.blue-19 a {
  background: #0A0AFF;
  color: #fff;
}

.ui-datepicker td.blue-20 a {
  background: #0909FF;
  color: #fff;
}

.ui-datepicker td.blue-21 a {
  background: #0808FF;
  color: #fff;
}

.ui-datepicker td.blue-22 a {
  background: #0707FF;
  color: #fff;
}

.ui-datepicker td.blue-23 a {
  background: #0606FF;
  color: #fff;
}

.ui-datepicker td.blue-24 a {
  background: #0505FF;
  color: #fff;
}

.ui-datepicker td.blue-25 a {
  background: #0404FF;
  color: #fff;
}

.ui-datepicker td.blue-26 a {
  background: #0303FF;
  color: #fff;
}

.ui-datepicker td.blue-27 a {
  background: #0202FF;
  color: #fff;
}

.ui-datepicker td.blue-28 a {
  background: #0101FF;
  color: #fff;
}

.ui-datepicker td.blue-29 a {
  background: #0000FF;
  color: #fff;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>

This is one way to do what you want to accomplish. With SASS you could make more variable styling. You may even be able to use things like CSS var().

There is no easy way to access the element as it's created dynamically. You can use widget() to do this; yet you have to run it often and repeatedly.

You might consider batches, so for example Less than 5, gets #EEF. 5 - 10 gets #DDF, 11 - 15 gets #CCF etc.

$(function() {
  var classSize = {
    "04192021": 12,
    "04202021": 2,
    "04212021": 20,
    "04222021": 6,
    "04232021": 4,
    "04262021": 9,
    "04272021": 29,
    "04282021": 16,
    "04292021": 27,
    "04302021": 7
  };
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var dateString = $.datepicker.formatDate("mmddyy", date);
      var result = [
        date.getDay() == 0 || date.getDay() == 6 ? false : true,
        "blue-0",
        "0 Students Attending"
      ];
      if (classSize[dateString]) {
        switch (true) {
          case classSize[dateString] < 5:
            result[1] = "blue-1";
            break;
          case classSize[dateString] < 10:
            result[1] = "blue-2";
            break;
          case classSize[dateString] < 15:
            result[1] = "blue-3";
            break;
          case classSize[dateString] < 20:
            result[1] = "blue-4";
            break;
          case classSize[dateString] < 25:
            result[1] = "blue-5";
            break;
          case classSize[dateString] < 30:
            result[1] = "blue-6";
            break;
          case classSize[dateString] >= 30:
            result[0] = false;
            result[1] = "blue-7";
            break;
        }
        result[2] = classSize[dateString] + " Students Attending";
      }
      return result;
    }
  });
});

.ui-datepicker td.blue-0 a {
  background-color: #FFFFFF;
}

.ui-datepicker td.blue-1 a {
  background: #CCF;
}

.ui-datepicker td.blue-2 a {
  background: #AAF;
}

.ui-datepicker td.blue-3 a {
  background: #88F;
}

.ui-datepicker td.blue-4 a {
  background: #66F;
}

.ui-datepicker td.blue-5 a {
  background: #44F;
  color: #FFF;
}

.ui-datepicker td.blue-6 a {
  background: #22F;
  color: #FFF;
}

.ui-datepicker td.blue-7 a {
  background: #00F;
  color: #FFF;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>