全日历不同事件单元格背景颜色

Question

下面的代码是我从博客中找到的用于更改事件单元格背景颜色的代码。但是事件呈现正在更改所有事件的单元格颜色。

event Render : function (event, element) {
    var dataToFind = moment(event.start).format('YYYY-MM-DD');
    $(" td [data-date='"+dataToFind+"']").addClass('activeDay');
}

我的问题是我有两个不同的事件，我只想更改一个事件的单元格背景颜色，而其他事件应该是正常的。

Answer 1

您可以通过两种方式实现上述目标

1. 使用 eventAfterAllRender 回调而不是eventRender并使用您需要的条件，例如您要将类添加到当前日期

   var dataToFind = moment().format('YYYY-MM-DD');
   $(" td [data-date='"+dataToFind+"']").addClass('activeDay');
   

2. 使用eventRender回调，在函数中编写以下代码片段。

如果您想将"activeDay"类添加到今天，那么

eventRender: function(event, element) {
   var today = moment().format('YYYY-MM-DD');
   var dataToFind = moment(event.start).format('YYYY-MM-DD');
   if (today == dataToFind) {
      $(element).addClass('activeDay');
   }
}

希望对您有所帮助！

Answer 2

感谢您的回答，但是下面的代码在我的场景中对我有帮助，

if (event.title.match("^XXXX:")) {
                        var start = new Date(event.start);
                        var end = new Date(event.end);
                        var dateDiff = end.getDate() - start.getDate();
                        if (moment(event.start).format('YYYY-MM-DD') != moment(event.end).format('YYYY-MM-DD')) {
                            for (i = 0; i < dateDiff + 1; i++) {
                                $("td[data-date='" + moment(start).add('days', i).format('YYYY-MM-DD') + "']").addClass('activeDay')
                            }
                        }
                        else if (moment(event.start).format('YYYY-MM-DD') == moment(event.end).format('YYYY-MM-DD')) {
                            $("td[data-date='" + moment(event.start).format('YYYY-MM-DD') + "']").addClass('activeDay');
                        }
                    }