如何根据事件以不同颜色突出显示日历中的日期？

Question

这是我的日历 java 脚本代码：

<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>

这是我查看日历的页面图片

从这个日历中，我必须根据我保存在数据库中的事件（使用颜色）突出显示日期。我对此一无所知。请帮助我解决这个问题。

Answer 1

你可以在Ajax成功时重新初始化日期选择器，像这样

$.ajax({
type: "POST",
url: "ajax_url" ,
success: function(response) {
    var highlight_dates = {};
    highlight_dates[ new Date( '03/10/2020' )] = new Date( '03/10/2020' );
    highlight_dates[ new Date( '02/21/2020' )] = new Date( '02/21/2020' );

    $('#datepicker').datepicker({
       beforeShowDay: function(date) {
          var highlight = highlight_dates[date];
            if( highlight ) {
                 return [true, "class-to-highlight", 'Special Event'];
            } else {
                 return [true, '', ''];
            }
       }
    });

} ,
});