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

Question

I am using a fullcalendar.Here the issue is theevent color.when event's start and end matches with cureent datetime it cannot changes its color.

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

                );

but in the 1st picture it shows blue and upcoming is correct.

Answer 1

I can't see a big problem with your code - it seems to work fine at least in the most obvious cases. Demo: https://codepen.io/ADyson82/pen/rNxedMR

However it could be expressed better:

1) It would be better to use eventRender instead of eventAfterRender so that changes are applied before the event appears on the calendar, not afterwards.

2) Some of your tests are redundant - e.g. if the event's end is before today's date, then logically the start date must also before it. Testing the end date is enough, we don't need to test the start date as well for that case.

3) Although according to your code you're using dates and times, making it relatively unlikely, there's still a possibility that if the date and time are identical to the current date and time, then it won't do the colour change because you're only testing for less than / greater than, and not equality. It would make sense for the "in progress" one to test for equality too.

4) fullCalendar 3 uses momentJS to represent date objects. It will be cleaner and should be more reliable therefore to compare the dates to a momentJS object directly, rather than a Date object. You can then also use moment's comparison methods which again should provide more guarantee of reliability than simple operators.

So here's a cleaner version of the same functionality:

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");
  }
},

Demo: https://codepen.io/ADyson82/pen/qBbZoPO