I am trying to display an image in the fc-event-inner class using addClass. I want to do this with jquery so I can use different images in different events. Can anyone tell me why this doesn't work?

calendar.fullCalendar('renderEvent', {
    title: title,
    start: start,
    end: end,
    allDay: allDay,
    eventRender: function(copiedEventObject,element) {                                          
        element.find('.fc-event-inner').css('background-image',"url(icons/kalender_medicin_100px.png)")
    },
    className: '.fc-event-inner'
});

I am trying to display an image in the fc-event-inner class using addClass. I want to do this with jquery so I can use different images in different events. Can anyone tell me why this doesn't work?

calendar.fullCalendar('renderEvent', {
    title: title,
    start: start,
    end: end,
    allDay: allDay,
    eventRender: function(copiedEventObject,element) {                                          
        element.find('.fc-event-inner').css('background-image',"url(icons/kalender_medicin_100px.png)")
    },
    className: '.fc-event-inner'
});

• javascript
• jquery
• fullcalendar

• Are you trying to add an icon or do you want the whole background as image? – A1rPun Commented Jan 24, 2014 at 8:36
• I wan't to add icons with drag and drop. – Søren Nørup Commented Jan 24, 2014 at 9:06
• You should add it to the fc-event-content or fc-event-title. – A1rPun Commented Jan 24, 2014 at 9:25
• Related question: stackoverflow./questions/3750521/… – SaeX Commented Oct 31, 2015 at 12:22

2 Answers 2

You should specify the eventRender in the fullCalendar configuration, not pass it through the renderEvent method.

$('#calendar').fullCalendar({
    eventRender: function(copiedEventObject,element) {
        var icon = $(document.createElement('div'));
        icon.css('background-image',"url(icons/kalender_medicin_100px.png)");
        element.find('.fc-event-title').html(icon + copiedEventObject.title);
    }
});

If you want to add icons only to the dragged events you can pass an custom property to the event data like so:

calendar.fullCalendar('renderEvent', {
    //...
    isCustom: true,
    //...
}

Now you can check if the event has the custom property in the eventRender event.

eventRender: function(copiedEventObject,element) {
    if(copiedEventObject.isCustom){
    //...
}

Thanks for the help. It helped me solve the problem.

But this code only returned an object and did'nt display the image:

    var icon = $(document.createElement('div'));
    icon.css('background-image',"url(icons/kalender_medicin_100px.png)");
    element.find('.fc-event-title').html(icon + copiedEventObject.title);

So insted of using:

   icon.css('background-image',"url(icons/kalender_medicin_100px.png)");

I placed the image in the fc-event-title div. So the solution is this:

    element.find('.fc-event-title').html('<p>Ingen migræne idag</p><img src="icons/kalender_glad_smiley.png"/>');

The only problem is that I can't use variables inside the html method, but in this context its not a problem. Thanks again