title: Datepicker change selectable date color CSS
body: <p>I have a date picker that has colors of days set dynamically. The only dates selectable are set to ALL Sundays only. My color pattern is set to every third day - the un-selectable dates are a muted red, the selectable dates are a bright red. - I want the selectable dates to be muted like the others.</p>
  
  <p>CSS on selectable cell looks like: <code>class    ui-datepicker-week-end shiftColor_C ui-datepicker-current-day</code></p>
  
  <p>CSS on unelectable cell looks like: <code>class   ui-datepicker-unselectable ui-state-disabled red_day_off</code></p>
  
  <p>I have setup: <a href="http://jsfiddle.net/jeffbarclay/hnjv3L8e/1/" rel="nofollow noreferrer">http://jsfiddle.net/jeffbarclay/hnjv3L8e/1/</a> of working copy!</p>
  
  <p><img src="https://i.stack.imgur.com/66gZZ.png" alt="enter image description here"></p>
  
  <p>CODE:</p>
  
  <pre><code>var array = ["8/19/2014","11/19/2014","08/25/2014"]
  
  function noKelly(pick) {
    var kelly = 4;
    var dow = pick.getDay();
      if(dow==kelly) return [false,''];
      return [true,''];  
  }
  
  function noWeekEnds(pick) {
  var dow = pick.getDay();
  if (dow &gt; 5 || dow &lt; 1) return [false, ''];
  return [true, ''];
  }
  
  function onlySunday(pick) {
  var dow = pick.getDay();
  if (dow &gt; 0) return [false, ''];
  return [true, ''];
  }
  
  function myAssignedLeave(pick) {
      var string = $.datepicker.formatDate('m/d/yy', pick);
      return [ array.indexOf(string) == -1 ]
  }
  
  function unavailable(pick) {
  var utcPick = new Date(pick.getUTCFullYear(), pick.getUTCMonth(), pick.getUTCDate(), 0, 0, 0);
  //-- converts your pick to utc time
  var utcStart = new Date(2014, 0, 0).getTime(); //gets utc time
  var day = Math.round((utcPick - utcStart) / 86400);
  var nwe = noWeekEnds(pick);
  var nkd = noKelly(pick);
  var assLeave = myAssignedLeave(pick);
  var osun = onlySunday(pick);
  var Rnd1 = (true) &amp;&amp; osun[0];   // First Round full weeks
  
  var myShift = "B";
  
  var Ashift = (day%3===0) &amp;&amp; nkd[0] &amp;&amp; assLeave[0];  // A Shift
  var Bshift = (day%3===1) &amp;&amp; nkd[0] &amp;&amp; assLeave[0];  // B Shift
  var Cshift = (day%3===2) &amp;&amp; nkd[0] &amp;&amp; assLeave[0];  // C Shift
  var Dshift = (true) &amp;&amp; nwe[0] &amp;&amp; assLeave[0];  // D Shift
  
  var Shift = "";
  var ShiftColor = "";
  var ShiftColorDayOff = "false";
  var DO_ShiftColor = "";
  
  if(myShift=="A") (Shift = Ashift) &amp;&amp;  (ShiftColor = "shiftColor_A");
  if(myShift=="B") (Shift = Bshift) &amp;&amp;  (ShiftColor = "shiftColor_B");
  if(myShift=="C") (Shift = Cshift) &amp;&amp;  (ShiftColor = "shiftColor_C"); 
  if(myShift=="D") (Shift = Dshift) &amp;&amp;  (ShiftColor = "shiftColor_D"); 
  
  
  //var shift = (true) &amp;&amp; osun[0];
  Shift = Rnd1;
  
  if((day%3===1) &amp;&amp; (osun[0] === false)) return [ false, 'green_day_off', 'unavailable' ];
  
  return [Shift, ShiftColor, "Unavailable"];  
  }
  
  $(document).ready(function () {
  $("#datepicker").datepicker({
      beforeShowDay: unavailable
  });
  
  $('#datepicker').attr('readonly', true);
  });
  </code></pre>