Спасибо @kingjiv Вы были на 100% правы.Календарь отображался до завершения запроса на получение.Я попытался использовать метод when, но не смог получить даты асинхронно.По сути, у меня должны быть даты, чтобы выделить до календаря, поэтому мне пришлось использовать async: false (не соответствует действительности).
Я включил свой полный код, который демонстрирует, каквыделить несколько событий, извлеченных из базы данных, используя параметр beforeShowDay.Использование asyc: false исправило проблему, при которой выделенные даты не выделялись при первоначальном розыгрыше.Также включена CSS для изменения цвета фона ячеек.
Есть еще небольшая проблема, когда выпадающее меню «год» не отображается при первоначальном рисовании, но я подтвердил, что это происходит только в FireFox4. Любой щелчок по календарю приводит к отображению меню года.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(), d = today.getDate(), 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', '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 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[1]-1, 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, 'highlight'];
}
}
return [true, ''];
}
});
</script>