FullCalendar.io - how to obtain date in the eventRender callback?

Question

In the fullcalendar.io eventRender callback, how can I get the date for which the event is being rendered?

In monthList view, for a multi-day event, eventRender is called for each day the event spans.

I want to rewrite the HTML for the event. The html will change depending on the day. The (outer) bounding days will format the time differently from the inner days. For example:

The 'Annual Meeting' event starts 10am 13th March, ends 2pm 15 March. I want the event to appear in the listMonth view as:

13 March

 10am - 12am : Annual Meeting 

14 March

 All Day : Annual Meeting 

15 March

 12am - 2pm : Annual Meeting 

The function signature for the eventRender callback is :

function( event, element, view ) { }

As far as I can see, none of the fields on any of these elements vary between successive calls to the callback for the same event hence making it difficult for the date to be determined.

Answer 1

Since I just stumbled over the same problem:

As far as i could determine there is no way in the eventRender callback to get the necessary information but the fullcalendar also provides an eventAfterRender callback. This will fire after the events are all added to the DOM.

This callback has the same signature aus the eventRender one:

function( event, element, view ) { }

With some jquery help you could just find the first heading above the element and get the date from that element. The date ist stored as an data-attribute in each heading row:

var $prevHeading = $(element).prev('.fc-list-heading');
var date = $prevHeading.data('date') // format: YYYY-MM-DD

After that you just need to compare this date with the event.start and event.end to determine which of your three cases this ist and after that you can search for the fc-list-item-time element and override the content:

var $timeElement = $(element).find('.fc-list-item-time')
$timeElement.text(YOUR_TEXT)

I hope this helps.