Question

我正在使用全日历，这里的问题是事件颜色。当事件的开始和结束与当前日期匹配时，它就不能更改其颜色。

eventAfterRender: function (event, element, view) {
                var dataHoje = new Date();

                if (event.start < dataHoje && event.end > dataHoje) {
                    //event.color = "Pastel orange"; //In progress
                    element.css('background-color', '#FFB347');
                } else if (event.start < dataHoje && event.end < dataHoje) {
                    //event.color = "Pastel green"; //Done OK
                    element.css('background-color', '#77DD77');
                } else if (event.start > dataHoje && event.end > dataHoje) {
                    //event.color = "Pastel blue"; //Not started
                    element.css('background-color', '#AEC6CF');
                }
            },

$eventsJson[] = array(
                    'description' => \Illuminate\Support\Str::limit($event->description,50),
                    'title' => $event->teacher,
                    'start' => $event->date."T".$event->start_time ,
                    'end' => $event->date."T".$event->end_time,
                    'type' => $event->subjects->name,
                    'subid' => $event->subid,
                    'day' =>date("d/m/Y", strtotime($event->date)),
                    'dat' => $event->date,
                    'stime' =>$event->start_time,
                    'etime' =>$event->end_time,
                    'class' => $event->classes->name,
                    'class_id' => $event->class_id,
                    'div' => $event->subclasses->name,
                    'subclass_id' => $event->sub_class_id,
                    'editdesc' => $event->description,
                    'on_id' => $event->id

                );

但是在第一张图片中它显示为蓝色，即将到来是正确的。

Answer 1

我看不到您的代码有什么大问题-至少在最明显的情况下，它似乎可以正常工作。演示：https://codepen.io/ADyson82/pen/rNxedMR

但是可以更好地表达出来：

1）最好使用eventRender而不是eventAfterRender，以便在事件出现在日历上之前而不是事后应用更改。

2）您的某些测试是多余的-例如如果事件的结束时间在今天的日期之前，那么从逻辑上讲，开始日期也必须早于该日期。测试结束日期就足够了，对于这种情况，我们也不需要测试开始日期。

3）尽管根据您的代码，您使用日期和时间，使其相对不太可能，但是如果日期和时间与当前日期和时间相同，则仍有可能它不会改变颜色，因为您只测试小于/大于，而不是相等。对于“进行中”的人也要测试平等性是很有意义的。

4）fullCalendar 3使用momentJS表示日期对象。因此，将日期直接与momentJS对象（而不是Date对象）进行比较会更加干净，并且应该更加可靠。然后，您还可以使用矩的比较方法，该方法应该比简单的运算符提供更多的可靠性保证。

所以这是相同功能的更干净的版本：

eventRender: function (event, element, view) {
  var dataHoje = moment();

  if (event.start.isSameOrBefore(dataHoje) && event.end.isSameOrAfter(dataHoje)) {
    //event.color = "Pastel orange"; //In progress
    element.css("background-color", "#FFB347");
  } else if (event.end.isBefore(dataHoje)) {
    //event.color = "Pastel green"; //Done OK
    element.css("background-color", "#77DD77");
  } else if (event.start.isAfter(dataHoje)) {
    //event.color = "Pastel blue"; //Not started
    element.css("background-color", "#AEC6CF");
  }
},

演示：https://codepen.io/ADyson82/pen/qBbZoPO

通过使用当前日期时间的开始和结束日期时间更改全日历事件颜色

1 个答案: