使用eventRender在fullcalendar事件中显示图像

时间:2014-01-24 08:32:24

标签: javascript jquery fullcalendar

我正在尝试使用fc-event-inneraddClass班级中显示图片。我想用jquery做到这一点,所以我可以在不同的事件中使用不同的图像。谁能告诉我为什么这不起作用?

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'
});

2 个答案:

答案 0 :(得分:2)

您应该在fullCalendar配置中指定eventRender,而不是通过renderEvent方法传递它。

$('#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);
    }
});

如果您只想为拖动的事件添加图标,可以将自定义属性传递给事件数据,如下所示:

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

现在,您可以检查事件是否在eventRender事件中具有自定义属性。

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

答案 1 :(得分:1)

感谢您的帮助。它帮助我解决了这个问题。

但是这段代码只返回了一个对象而没有显示图像:

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

故意使用:

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

我将图片放在fc-event-title div中。所以解决方案就是:

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

唯一的问题是我不能在html方法中使用变量,但在这种情况下它不是问题。 再次感谢