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

Question

我正在使用 fullcalendar.Here 问题是事件 color.when 事件的开始和结束与当前日期时间匹配，它无法更改其颜色。

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) 尽管根据您的代码您使用日期和次，这使得它相对不太可能，但仍有可能如果日期和时间与当前相同日期和时间，那么它不会改变颜色，因为你只测试小于/大于，而不是相等。 "in progress" 也可以测试是否相等。

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

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

Change fullcalendar event color by start and end datetime with current datetime

javascript

fullcalendar

laravel

fullcalendar-3