JavaScript/FullCalendar - Attaching event to event rendering

Question

My full code is here: http://pastebin.com/nctMtX9m

I've got an instance of FullCalendar, and using the 'className' property of the event object, I'm adding icons to certain events after the calendar renders. These simple icons indicate if a job (event) on the calendar has been shipped.

$(window).load(function(){
$('a.shipped div span').prepend("<img src=\"/img/truck_white.png\" title=\"Shipped\" alt=\"Shipped\" style=\"padding:2px 5px 5px 0; width=\"16\" height=\"16\" />");});

This works great! The problem is that whenever I change the view, like changing the month then coming back, FullCalendar completely re-renders the events! This means they are without my icons now since my icon adding process only occurs once, after the initial render.

I need my icon adding process to fire every time the FullCalendar renders events.

I've found this: http://arshaw.com/fullcalendar/docs/event_data/events_function/ but unfortunately my evens are written to the page by PHP, so they are statically defined as far as the script is concerned. This example leads me to believe that I can only do this with an external data source. This level of JavaScript is admittedly not my forte.

How do I attach my icon adding process to something that fires every time Fullcalendar renders events if my event data is statically defined?

Thanks!

edit I found out how to do what I want using eventRender, but I can't seem to reference the part of the element that I want to, because now the rendering is slightly off. I'll work on this further and update when I find the answer.

edit 2 Figured it out, can't post answer because I'm new. Will post answer tomorrow.

Ryan Ryan · Accepted Answer · 2013-03-21T14:16:53

The solution was to use eventRender.

eventRender: function(event, element) {
if(event.className == 'shipped'){
    var find = '<span class="fc-event-title">';
    var replace = find + '<img src="/img/truck_white.png" title="Shipped" alt="Shipped" class="event_icon" />';
    var newHTML = $(element).html().replace(find, replace);
    $(element).html(newHTML);
}
}

It's a bit of a convoluted find/replace, but it works.

JavaScript/FullCalendar - Attaching event to event rendering

1 Answers