title: Showing Events on a Datepicker with Server-side data
body: <p>I have been busy creating a solution to a client that has proven to be a bit more difficult than I thought it would be. I am using the jQuery Datepicker widget to display calendar events (monthly view) from server-side code. Every thing in the following code works EXCEPT the CSS. It is not changing anything and it seems I've tried everything in the world.   </p>
  
  <p>A Calendar is shown in month-view on page-load (MVC) and if a user has events the day should have a different background-color. Also, when the user changes month-to-month, the same logic happens (ajax call to server). Again, this all is working well. My directive to change the background color will not.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $.expr[":"].exactly = function (el, i, m) {
              var s = m[3];
              if (!s) return false;
              return eval("/^" + s + "$/i").test($(el).text());
          };
  
          var currentYear = (new Date).getFullYear();
          var currentMonth = (new Date).getMonth();
  
          function getTheData(year, month) {
              var theYear = year;
              var theMonth = month;
              //alert(theYear + ", " + theMonth);
  
              $.post("GetMeSomeData", { year: theYear, month: theMonth }, function(data) {
                  //cycle through the dates and address the CSS appropriately
                  var i = 0;
                  for (i = 0; i &lt; data.length; i++) {
                      $('.ui-datepicker-calendar td a:exactly(' + data[i]['d'] + ')')
                          .css({ backgroundColor: 'blue' });
                  }
              });
          }
  
          $('#date').datepicker({
              inline: true,
              beforeShowDay: getTheData(currentYear, currentMonth),
              onSelect: function (dateText, inst) {
                  Date.prototype.toString = function () { return isNaN(this) ? 'NaN' : [this.getDate(), this.getMonth(), this.getFullYear()].join('/'); };
                  d = new Date(dateText);
                  //alert(d.getDate() + ", " + d.getFullYear());
                  getTheData(d.getFullYear(), d.getDate());
              },
              onChangeMonthYear: function (year, month, inst) {
                  //alert(year + ", " + month);
                  getTheData(year, month);
  
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>