FullCalendar - Display icon on each day based on event criteria

Question

I am using FullCalendar. I would like to display an icon in each day cell that matches certain event criteria.

More specifically, I would like to display a warning & tooltip if the 'notes' field in my event feed is not empty.

I am able to display an icon on each day, regardless of any events, but I want to take it one step further.

Here is how I am displaying on each day using dayRender:

dayRender: function ( date, cell) {
cell.prepend('<i class="fa fa-exclamation-circle" aria-hidden="true"></i>');
}

I can get the tooltip and icon to show up correctly if I use eventRender, but then the icon shows up as part of the event....which I don't want. I want the icon part of the day cell.

Here is my eventRender:

eventRender: function(event, element) { 
                if (event.notes) { 
                    $(element).tooltip({title: event.notes});
        element.find(".fc-title").prepend("&nbsp;&nbsp;" + "<i class='fa fa-exclamation-circle' aria-hidden='true'></i>"); 
        }
    } 

Here is my event feed:

$event_array[] = array(
        'id' => $calrow['id'],
        'title' => $calrow['available'],
        'start' => $calrow['start_date'],
        'end' => $calrow['end_date'],
        'notes' => $notes,
        'price' => '$'.$calrow['nightly_price'],
        'confirmationcode' => $calrow['confirmation_code'],
        'status' => $calrow['status'],
        'available' => $available

);

Is it possible to make the dayRender based on specific event criteria? Do I use a combination of dayRender and eventRender?

Answer 1

Day cells in the month view are rendered like this:

<td class="fc-day-top fc-thu fc-past" data-date="2017-11-02">

Therefore you can find a particular day cell quite easily:

$('.fc-day-top[data-date="2017-11-02"]')

Within the eventRender callback, you can use the event's start time to make this dynamically relate to the correct day for the event:

eventRender: function(event, element)
{
  $('.fc-day-top[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("Hi");
},

See http://jsfiddle.net/sbxpv25p/68/ for a working example.

You may append anything you like in place of "Hi", of course.

Note that, as per the working example, this still has the drawback that it may append the same thing more than once, if there are multiple events on a given day.