-1

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 (i.e. as the current time changes, the events' backgrounds should change).

I appreciate any tips/tricks/pointers!

ADyson
  • 57,178
  • 14
  • 51
  • 63
AWeber
  • 381
  • 1
  • 3
  • 14
  • I don't believe this is possible through the existing API, no. The calendar does not emit any kind of event when the nowIndicator is moved. You'd probably have to make a [feature request](https://fullcalendar.io/requesting-features) to enhance this functionality, or try and modify the fullCalendar source code yourself. Alternative I guess you could just have your own parallel timer on the page to test the current time at intervals and highlight any events which match. – ADyson Aug 29 '19 at 13:05

1 Answers1

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

    });

Rajesh KP
  • 17
  • 8