时间戳

首页 > 解决方案 > 通过当前日期时间的开始和结束日期时间更改全日历事件颜色

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

问题描述

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

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

                );

日历视图

今天的日期 12/06/2020 事件在时间开始时应显示柔和的橙色，在结束日期时间之后其颜色应为柔和的绿色

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

标签： javascriptlaravelfullcalendarfullcalendar-3

解决方案

我看不出你的代码有什么大问题——至少在最明显的情况下它似乎工作正常。演示：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

推荐阅读