jQuery Datepicker beforeShowDay仅在第一次单击后才起作用

我已经包含了我的完整代码,演示了如何使用beforeShowDay选项突出显示从数据库中提取的多个事件.使用asyc：false修复了突出显示的日期未在初始绘制中突出显示的问题.还包括用于改变细胞背景颜色的css.

还有一个小问题,“年份”下拉菜单没有显示在初始抽奖中,但我确认这只发生在FireFox 4中.任何点击日历都会导致显示年份菜单. Safari在初始绘图时正确显示年份菜单.

<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 with events on them. Text color - red,background - pastel yellow. */
td.highlight,table.ui-datepicker-calendar tbody td.highlight a { 
    background: none !important;
    background-color: #fffac2 !important; 
    color: #FF0000;
}

/* This is Today's day in rightsidebar mini calendar (datepicker). */
/* Restore style to that of a default day,then just 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;
}

/* This is the selected day in the 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 a little separation between month and year select menus */
.ui-datepicker select.ui-datepicker-month {
    width: 42%;
    margin-right: 6px;
}

</style>

<script>
$(document).ready(function(){

    // get the current date
    var today = new Date();
    var m = today.getMonth(),y = today.getFullYear();

    // Get a list of dates that contain events in THIS month only from database.
    // Declare and populate 'eventDates' array BEFORE adding "beforeShowDay" option to 
    // the datepicker. Otherwise,highlightDays() will have an empty 'eventDates' array.

    var eventDates = [];
    fetchEventDays(y,m+1);     // Get events for the current year and month.

    $('#datepicker').datepicker();
    $('#datepicker').datepicker('option',getday);
    $('#datepicker').datepicker('option','dateFormat','yy-mm-dd');
    $('#datepicker').datepicker('option','changeYear',true);
    $('#datepicker').datepicker('option','changeMonth','yearRange','2010:2012');
    $('#datepicker').datepicker('option','showButtonPanel',true);

    // disable all dates prior to today.
    //  $('#datepicker').datepicker('option','minDate',new Date(y,m,d));

    // ------------------------------------------------------------------
    // getday - Replaces the #content div of the current page with 
    // the content of the page that is created and 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 was performed. '+dateText);
        });
    }

    // ------------------------------------------------------------------
    // fetchEventDays - The ajax call below is synchronous (NOT asynchronous).
    // eventDates array must be populated prior to adding the beforeShowDay option
    // to the datepicker,otherwise,highlightDays() will have an 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 i = 0; i < event_dates.length; i++) {
                    var date_parts = event_dates[i].split('-');
                    eventDates.push(new Date(date_parts[0],date_parts[2]));
                }                       
            }
        });
    }

    // ------------------------------------------------------------------
    // highlightDays - Add a custom css class to dates that exist in the
    // eventDates array. Must also add the css for td.highlight (above).
    // ------------------------------------------------------------------
    function highlightDays(date) {
        for (var i = 0; i < eventDates.length; i++) {
            if ((eventDates[i].getTime() == date.getTime())) {
                return [true,''];
    }

});
</script>