CODEWITHSUNDEEP
angularjsfullcalendar
Martijn Welker
Martijn Welker

Reputation: 5605

Get fullcalendar event's html element

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.

Upvotes: 3

Views: 6869

Answers (2)

scottysmalls
scottysmalls

Reputation: 1271

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 + ']');

Upvotes: 6

smcd
smcd

Reputation: 3265

If your events have an id set you can add an id or data tag with eventRender and set the event.id into there, and then eventMouseover you can find the element based on the event.id

eventRender: function (event, element, view) {
    /* The anchor tag is where the id gets set */
    element.attr('id', 'event-id-' + event.id);
},
eventMouseover: function (event, jsEvent, view) {
    var $html = $('#event-id-' + event.id).html();
}

Upvotes: 1

Related Questions