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

Posted 2023-05-07

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

【英文标题】：How to highlight the date in calendar with different colors according to events?

【发布时间】：2020-06-07 17:39:00

【问题描述】：

这是我的日历 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>

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

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

【问题讨论】：

是的，您可以突出显示日期，有关更多信息，请点击此链接 - ***.com/a/60300826/12853506

你是对的，但他们在变量中指定了日期。我正在使用 ajax 从表中获取数据，然后我必须突出显示日期

【参考方案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, '', ''];
            
       
    );

 ,
);

【讨论】：

您必须只返回日历表中的日期，但要再次分配日期