1

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.

3
  • event.start will give you the date. Then, to find the bit of HTML you need to change, load your calendar and use your browser tools to inspect the HTML and find the right element class to target. Bear in mind for different view types it may be different.
    – ADyson
    Mar 16, 2018 at 20:53
  • 1
    thanks @ADyson. From what I can see, 'event.start' refers to the start of the event, not the date that the event is being rendered for. In the example I posted above, each time eventRender is called, the event.start is set to 13 March. Mar 18, 2018 at 18:01
  • Any news on this? I'm having the exact same problem. I want to count the number of events in each day, but relying only on event.start counts multi-day events as the number of days it spans. Mar 12, 2019 at 12:53

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.