title: DatePicker give color to unselectable date
body: <p>Have a dynamic calendar in JQuery page based on data from a database the selectable dates change per user. only issue is I have one calendar when loaded from database needs to show the selectable dates only on sunday, this works fine, but I need the others days of the week to get say red every third day... this all works al long as the date is selectable, but not if not selectable?</p>
  
  <pre><code>&lt;style&gt;
  .ui-datepicker-calendar .shiftColor_C a {
    color: black;
    background: red;
    border-color: blue;
    padding:3px; 
  }
  .ui-datepicker-calendar .shiftColor_B a {
    color: black;
    background: green;
    border-color: blue;
    padding:3px; 
  }
  .ui-datepicker-calendar .shiftColor_A a {
    color: black;
    background: blue;
    border-color: blue;
    padding:3px; 
  }
  .ui-datepicker-calendar .shiftColor_D a {
    color: white;
    background: #551111;
    border-color: blue;
    padding:3px; 
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" language="javascript"&gt;
  
  $(document).ready(function() {
  
   // Set the variable $width to the width of our wrapper on page load
       $width = $('#content').width();
       // Target all images inside the #content. This works best if you want to ignore certain images that are part of the layout design
       $('#content img').css({
            // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image
            // is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
            'max-width' : $width , 'height' : 'auto'
            });
  
  
  //var array = ["8/13/2014","10/3/2014","8/25/2014"]  // date to exclude from cal, pulled from already assigned dates in DB
  var array = ($("#myLeave").val());
  //alert(array);
  function myStartMonth() {
  return '1/1/2015';
  }
  
  function noKelly(pick) {
    var kelly = ($("#myKelly").val()) - 1;
    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);
      //alert(array.indexOf(string) == -1 );
      return [ array.indexOf(string) == -1 ]
  }
  
  function unavailable(pick) {
    var myShift = ($("#myShift").val());
    var myRound = ($("#myRound").val());
    //var myRound = ($("#LabelRound").text());
  
    var utcPick = new Date(pick.getUTCFullYear(), pick.getUTCMonth(), pick.getUTCDate(), 0, 0, 0);
    var utcStart = new Date(2014, 0, 0).getTime(); //gets utc time
    var day = Math.round((utcPick - utcStart) / 86400);
  
    var nkd = noKelly(pick); 
    var nwe = noWeekEnds(pick);
    var assLeave = myAssignedLeave(pick);
    var osun = onlySunday(pick);
  
    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 Rnd1 = (true) &amp;&amp; osun[0];  ; // First Round full weeks
  
    var Shift = "";
    var 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");; 
  
    if(myRound == "ROUND 1") Shift = Rnd1;
  
    //alert(myRound + " -- " + Rnd1 + " -- " + Bshift);
  
    var start = new Date(2015,0,11);
    var end = new Date(2016,0,9);
    if(pick &lt; start || pick &gt; end) return [false, ShiftColor, "Selection"];
  
    return [Shift, ShiftColor, "Selection"];   
  }
  </code></pre>
  
  <p>The solution was to alter my unavailable function as follows:</p>
  
  <pre><code>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 aaa = aa(pick);
  var shift = (day % 3 === 0) &amp;&amp; aaa[0] &amp;&amp; nwe[0];
  
  if((day % 3 === 0) &amp;&amp; (aaa[0] === false))
      return [ false, 'green', 'Green!' ];
  
  if((day % 3 === 0) &amp;&amp; (nwe[0] === false))
      return [ false, 'green', 'Green!' ];
  
  return [shift, "red2", "Unavailable"]  
  }
  </code></pre>