jQuery Datepicker beforeShowDay works only after 1st click -

i'm having problem beforeshowday.

when page loads, days i've told highlight not highlighted until click day in calendar. if click next-month button , come original month, 'selected' days highlighted expected.

so, on initial draw of calendar dates not highlight have programmed them do. click in calendar fixes itself.

am missing init option? please see code example below. test url in protected directory user/pass of test/test. @ mini-cal in right column bottom. switch next month , see problem. note highlighted days im may. also, note 'year' dropdown missing until click happens.

http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list

the code:

  <script> $(document).ready(function(){      // current date     var today = new date();     var m = today.getmonth(), d = today.getdate(), y = today.getfullyear();      // need list of event dates month database.     // declare 'dates' var before adding "beforeshowday" option datepicker,     // otherwise, highlightdays() not have '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 performed. '+datetext);         });     }      // ------------------------------------------------------------------     // fetcheventdays     // ------------------------------------------------------------------     function fetcheventdays(year, month) {         var paramstr ='?do=get_event_dates&yr=' + year + '&mo=' + month;         $.get('<%config.db_cgi_url%>/eventmgr-ajax.cgi'+ paramstr, function(data) {             var recur_dates = data.split(',');             for(var = 0; < 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]));             }                         // causes dates events highlight on initial draw, // when clicking next month, switches orig month. //        $('#datepicker').datepicker('option', {}); // refresh          });     }      // ------------------------------------------------------------------     // highlightdays     // ------------------------------------------------------------------     function highlightdays(date) {         (var = 0; < dates.length; i++) {             if ((dates[i].gettime() == date.gettime())) {                 return [true, 'highlight'];             }         }         return [true, ''];     }   });   </script> 

thanks @kingjiv 100% correct. calendar displaying before request completed. tried using when method, not dates asynchronously. must have the dates highlight before calendar displayed, had use async: false (not true).

i've included complete code demonstrates how highlight multiple events pulled database using beforeshowday option. using asyc: false fixed issue highlighted dates did not highlight on initial draw. css changing cells background color included well.

there still tiny issue 'year' dropdown menu not display on initial draw, have confirmed happens in firefox 4. click on calendar causes year menu display. safari displays year menu on initial draw.

     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  <style type="text/css"> /* dates events on them. text color - red, background - pastel yellow. */ td.highlight, table.ui-datepicker-calendar tbody td.highlight {      background: none !important;     background-color: #fffac2 !important;      color: #ff0000; }  /* today's day in rightsidebar mini calendar (datepicker). */ /* restore style of default day, bold it. */ .ui-state-highlight, .ui-widget-content .ui-state-highlight {     border: 1px solid #d3d3d3;      background: #e6e6e6 url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;      font-weight: bold;     color: #555555; }  /* selected day in inline datepicker. */ .ui-state-active, .ui-widget-content .ui-state-active {     color: #000000;     opacity: 1.0;     filter:alpha(opacity=100);     border: 1px solid #000000; }  /* add little separation between month , year select menus */ .ui-datepicker select.ui-datepicker-month {     width: 42%;     margin-right: 6px; }  </style>  <script> $(document).ready(function(){      // current date     var today = new date();     var m = today.getmonth(), d = today.getdate(), y = today.getfullyear();      // list of dates contain events in month database.     // declare , populate 'eventdates' array before adding "beforeshowday" option      // datepicker. otherwise, highlightdays() have empty 'eventdates' array.      var eventdates = [];     fetcheventdays(y, m+1);     // events current year , month.      $('#datepicker').datepicker();     $('#datepicker').datepicker('option', 'onchangemonthyear', fetcheventdays);     $('#datepicker').datepicker('option', 'beforeshowday', highlightdays);     $('#datepicker').datepicker('option', 'onselect', getday);     $('#datepicker').datepicker('option', 'dateformat', 'yy-mm-dd');     $('#datepicker').datepicker('option', 'changeyear', true);     $('#datepicker').datepicker('option', 'changemonth', true);     $('#datepicker').datepicker('option', 'yearrange', '2010:2012');     $('#datepicker').datepicker('option', 'showbuttonpanel', true);      // disable dates prior today.     //  $('#datepicker').datepicker('option', 'mindate', new date(y, m, d));      // ------------------------------------------------------------------     // getday - replaces #content div of current page      // content of page created , displayed via perl     // ------------------------------------------------------------------     function getday(datetext, inst) {          $('#content').load('<%config.db_cgi_url%>/eventmgr.cgi?do=view_day;date='+datetext+' #eventmgr_content', function() { //      alert('load performed. '+datetext);         });     }      // ------------------------------------------------------------------     // fetcheventdays - ajax call below synchronous (not asynchronous).     // eventdates array must populated prior adding beforeshowday option     // datepicker, otherwise, highlightdays() have empty eventdates array.     // ------------------------------------------------------------------     function fetcheventdays(year, month, inst) {         var url ='<%config.db_cgi_url%>/eventmgr-ajax.cgi?do=get_event_dates&yr=' + year + '&mo=' + month;          $.ajax({             url: url,             async: false,             success: function(result){                 var event_dates = result.split(',');                 for(var = 0; < event_dates.length; i++) {                     var date_parts = event_dates[i].split('-');                     eventdates.push(new date(date_parts[0], date_parts[1]-1, date_parts[2]));                 }                                    }         });     }      // ------------------------------------------------------------------     // highlightdays - add custom css class dates exist in     // eventdates array. must add css td.highlight (above).     // ------------------------------------------------------------------     function highlightdays(date) {         (var = 0; < eventdates.length; i++) {             if ((eventdates[i].gettime() == date.gettime())) {                 return [true, 'highlight'];             }         }         return [true, ''];     }  }); </script>