Add Icon(s) in first line of an event (fullCalendar)

Question

For specific attributes of an event to be displayed in the 'fullCalendar' matrix I would like to add icons to show them, for 'completed' an (i) button, or an URL symbol in case the event contains an URL link.

I don't want to write any html string to one of the elements (fc-event-time/-title) in the <a> element, but define an additional element like this:

<a>
  <span class="fc-event-time">15:15  - 16:15<br></span>
  **<span class="fc-event-icons"> ..some definitions for icons here ..</span>**
  <span class="fc-event-title">Fri Dille</span>
</a>

Any help here? Günter

Answer 1

One possible solution could be:

  myUtil.goCalendar();       // build calendar with all events 

  // --- post process to add functionality to 'specific' events displayed 
  //     in the calendar matrix, eg. "completed"
  $("div.afc-completed").each(function(){
     $(this).find('span.fc-event-time').addClass("afc-event-completed");
  });

With myUtil.goCalendar(); I building the calendar with all events. That includes to add an event.className ('afc-completed') for all events with that attribute. After building the calendar I get all those events and add another class to the 'fc-event-time'. That's not what I thought with my first request, but could be a base to add more html code using a CSS statement like this:

.afc-event-completed {
    color: red;
    text-decoration: line-through;
}

.. or to add icons. Maybe not the best procedure .. but a way to solve the requirement.

Call for experts:
Any other/ better/ shorter/ faster way.
Günter

Answer 2

You could piggyback on eventRender event like so:

$("#YourCalendar").fullCalendar({
    eventRender: function(event, element) {
        element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("Whatever you want the content of the span to be"));
    }
});

similarly you could append the new element to any other element in the event's DIV container