title: How can I set a different class to past dates on the jQuery UI Datepicker?
body: <p>Is there a way to set previous <em>selected</em> dates of the jQuery UI Datepicker to a different class?</p>
  
  <p>The scenario I am dealing with is that there is a calendar with upcoming events and previous events. The upcoming events right now get a class applied to them and are styled accordingly. I need to do the same for previous dates that had an event.</p>
  
  <p>So for instance:</p>
  
  <p><strong>May 10th</strong> would be colored gold (<em>highlight</em> class) because it's an upcoming event.</p>
  
  <p><strong>May 8th</strong> would be colored a light gray (<em>passed-event</em> class) because it's a previous event.</p>
  
  <p>Here is what I have so far (working from <a href="http://api.jqueryui.com/datepicker/#option-beforeShowDay" rel="nofollow">beforeShowDay</a>):</p>
  
  <pre><code>beforeShowDay: function(date) {
                      var result = [true, '', null],
                          afterOrToday = $.grep(events, function(event) {
  
                              var eventDate = new Date(event.Date),
                                  todaysDate = new Date();
  
                              return date.valueOf() === eventDate.valueOf();
                          }),
                          beforeToday = $.grep(events, function(event) {
  
                              var eventDate = new Date(event.Date),
                                  todaysDate = new Date();
  
                              return date.valueOf() &lt; eventDate.valueOf();
                          });
  
                      if (afterOrToday.length)
                          result = [true, 'highlight', null];
                      else if (beforeToday.length)
                          result = [true, 'passed-event', null];
  
                      return result;
                  }
  </code></pre>