title: How to change CSS styles for certain dates on jQuery DatePicker?
body: <p>I am using the Jquery datepicker and everything is working fine and all styled how i want apart from any events i have in the database.</p>
  
  <p>I would like any day that has an event to have a style using .my_class so instead of the default styling, it has a different colour.  I would like this to apply for days that are in other months so if there's an event on the 1st of the next month, then style that.</p>
  
  <p>I have used this to style the days of the other months to how i want but using something similar for the days with events doesn't work.</p>
  
  <p>This works by changing the background colour of the other months</p>
  
  <pre><code>.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
      background: #fff;
      color: #b4b3b3;    
  }
  </code></pre>
  
  <p>This doesn't work</p>
  
  <pre><code>.ui-datepicker-other-month.ui-state-disabled .my_class span {
      background: #f00;
      color: #b4b3b3;    
  }
  </code></pre>
  
  <p>This is the jquery for the datepicker and adding .my_class to any table cells that have an event</p>
  
  <pre><code>var selected_dates = new Array();
      // gets all the events from the database using AJAX
      selected_dates = getSelectedDates();
  
      $('#datepicker').datepicker({
          inline: true,
          dateFormat: 'yy-m-d',
          showOtherMonths: true,
          dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          beforeShowDay: function (date)
          {
              // gets the current month, day and year
              // Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
              var mm = date.getMonth() + 1,
                  dd = date.getDate(),
                  yy = date.getFullYear();
              var dt = yy + "-" + mm + "-" + dd;
  
              if(typeof selected_dates[dt] != 'undefined')
              {
                  // puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
                  // the "true" parameter is used to know which are the clickable dates
                  return [true, " my_class"];
              }
  
              return [false, ""];
          },
          onSelect: function(date)
          {
              // puts the event's title in the dialog box
              $("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
              $("#dialog").dialog("option","title",selected_dates[date]['event_title']);
              // puts the event's description text in the dialog box
              $("#dialog").text(selected_dates[date]['event_description']);
              // show the dialog box
              $("#dialog" ).dialog();
          }
      });
  </code></pre>