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

Well this topic is old, but I couldn't find here how to do it with <img> tags so I leave here another way to put images in fullcalendar events:

Add in your eventObject a path to the image. If you use javascript it would be something like:

events: [
    {
        title  : 'event1',
        start  : '2010-01-01',
        imageurl:'img/edit.png'
    },
    {
        title  : 'event1',
        start  : '2010-01-01'
    }]

Then on eventRender just put the image:

eventRender: function(event, eventElement) {
    if (event.imageurl) {
        eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
    }
},

If you want to use the same image on all items, you just need to put this in your eventRender:

eventElement.find("div.fc-content").prepend("<img src='pathtoimage.png' width='12' height='12'>");

Answer 2

With this you can add text or HTML to the title of your events in Fullcalendar

eventRender: function(event, element) {

            var icon  = 'The icon you want, HTML is possile';
                $(element).find('.fc-time').append(icon);
            }