title: jQuery Datepicker beforeShowDay works only after 1st click
body: <p>I'm having a problem with <code>beforeShowDay</code>.</p>
  
  <p>When my page loads, the days I've told to highlight are not highlighted until I click a day in the calendar. Also if I click the next-month button and come back to the original month, then the 'selected' days are highlighted as expected.</p>
  
  <p>So, only on the initial draw of the calendar do the dates not highlight as I have programmed them to do. Any click in the calendar fixes itself.</p>
  
  <p>Am I missing an init option? Please see my code example below. My test url is in protected directory with a user/pass of test/test. Look at the mini-cal in right column bottom. Switch to the next month and back to see my problem. Note the highlighted days im May. Also, note that the 'year' dropdown also is missing until a click happens.</p>
  
  <p><a href="http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list">http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list</a></p>
  
  <p>The code:</p>
  
  <pre><code>  &lt;script&gt;
  $(document).ready(function(){
  
      // get the current date
      var today = new Date();
      var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();
  
      // Need list of event dates for THIS month only from database.
      // Declare 'dates' var before adding "beforeShowDay" option to the datepicker,
      // otherwise, highlightDays() does not have the 'dates' array.
      dates = [];
      fetchEventDays(y, m+1);
  
      $('#datepicker').datepicker({
          dateFormat: 'yy-mm-dd',
          changeMonth: true,
          changeYear: true,
          setDate: today,
          inline: false
      });
  
  
      $('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays);
      $('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
      $('#datepicker').datepicker('option', 'onSelect', getday);
  
  
      // ------------------------------------------------------------------
      // getday
      // ------------------------------------------------------------------
      function getday(dateText, inst) { 
          $('#content').load('http://www.mydomain/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() {
      alert('Load was performed. '+dateText);
          });
      }
  
      // ------------------------------------------------------------------
      // fetchEventDays
      // ------------------------------------------------------------------
      function fetchEventDays(year, month) {
          var paramStr ='?do=get_event_dates&amp;yr=' + year + '&amp;mo=' + month;
          $.get('&lt;%config.db_cgi_url%&gt;/eventmgr-ajax.cgi'+ paramStr, function(data) {
              var recur_dates = data.split(',');
              for(var i = 0; i &lt; recur_dates.length; i++) {
                  var date_parts = recur_dates[i].split('-');
                  dates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
              }                       
  
  // This causes dates with events to highlight on initial draw, but
  // when clicking to the next month, it switches back to orig month.
  //        $('#datepicker').datepicker('option', {}); // Refresh
  
          });
      }
  
      // ------------------------------------------------------------------
      // highlightDays
      // ------------------------------------------------------------------
      function highlightDays(date) {
          for (var i = 0; i &lt; dates.length; i++) {
              if ((dates[i].getTime() == date.getTime())) {
                  return [true, 'highlight'];
              }
          }
          return [true, ''];
      }
  
  
  });
    &lt;/script&gt;
  </code></pre>