how do i highlight the fullcalendar timegridview current event?

Question

Just starting to use fullcalendar and it looks great.

I'm testing the TimeGridView, and enabling the 'nowIndicator'.

It looks like the eventRender only happens as the events are initially added to the view...

Is there a way to dynamically change the style ("highlight"/change background color) of an event when it is currently occurring? That is, when the "nowIndicator" is over the event?

For example, an event that occurs "today" from 09:00:00 to 10:00:00...when the current time is anytime in that range, that specific event's background color should change.

This is especially useful when the view stays displayed for an extended-period (ie as the current time changes, the events' backgrounds should change).

I appreciate any tips/tricks/pointers!

Answer 1

You can manipulate the event object when populating the events. Based on required time, set additional attribute say "SetBackgroundColor:#000000". Pass this object to Calendar. Under "eventRender" method manipulate the element and set this color.

Below are the sample steps that might help:

1. Write server side code, manipulate the event object and set color to field based on business logic.

     { id: data.Id, start: data.FromDate, end: data.ToDate, title: data.Name, description: data.Description, **backgroundColor: data.ColorCode,** allDay: falsedata.AllDay } 

2. Html side: Call Ajax method and get the list of event object.

3. Pass this object and set under Calendar events:

    $('#Calendar').fullCalendar({ //..... set other options events: function (start, end, timezone, callback) { callback(eventsList); }, eventRender: function (event, element) { element.find("div.fc-content").html("<div class='ddl'>" + "<span class='event-icon' style = 'background: " + **event.backgroundColor** + ";'></div></div>");//Manipulate the rendered HTML of Calendar cell }, viewRender: function (view) { var date = new Date(view.calendar.getDate()); }, 

   });