Get fullcalendar event's html element

Question

I have a list of Fullcalendar events and I need to get the actual HTML elements associated with them, this code retrieves an array of the event objects:

var events = handleCalendarEvent('clientEvents', function(_event) {
                 return _event.origin === event.origin &&  isExternalEvent(_event);
             });

now I need the actual HTML elements to do some manipulation with them on hover (eventrender won't work), looking at the documentation I couldn't find any function to get them.

Answer 1

You may still need to use eventRender. As far as I know there is no getElementById type function built in to fullCalendar and, as you probably know, no uniquely identifiable properties are added to the actual element. I would add an id during the callback:

$('#calendar').fullCalendar({
  ...
  eventRender: function (event, element) {
    element.data('event-id',event.id);
  },
  ...
})

Later on, when you grab your array of event objects, you can use jQuery to find them:

var events = handleCalendarEvent('clientEvents', function(_event) {
                 return _event.origin === event.origin &&  isExternalEvent(_event);
             });

var first_event = $("#calendar").find('[data-event-id=' + events[0].id + ']');