JavaScript / FullCalendar - 将事件附加到事件呈现

时间:2013-03-20 19:57:49

标签: javascript events fullcalendar

我的完整代码在这里:http://pastebin.com/nctMtX9m

我有一个FullCalendar实例,并使用事件对象的'className'属性,我在日历渲染后向某些事件添加图标。这些简单的图标表示日历上的作业(事件)是否已发货。

$(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\" />");});

这很棒!问题是,每当我更改视图时,比如更改月份然后返回,FullCalendar会完全重新呈现事件!这意味着它们现在没有我的图标,因为我的图标添加过程仅在初始渲染之后发生一次。

我需要在每次FullCalendar呈现事件时触发我的图标添加过程。

我发现了这个:http://arshaw.com/fullcalendar/docs/event_data/events_function/但不幸的是我的evens是通过PHP写入页面的,因此就脚本而言,它们是静态定义的。这个例子让我相信我只能用外部数据源来做这件事。这个级别的JavaScript无疑是我的强项。

如果我的事件数据是静态定义的,那么每次Fullcalendar渲染事件时,如何将我的图标添加过程附加到某些内容?

谢谢!

编辑我发现了如何使用eventRender做我想做的事情,但我似乎无法引用我想要的元素部分,因为现在渲染略有偏差。当我找到答案时,我会进一步研究这个问题并进行更新。

编辑2 想出来,因为我是新人,所以无法发布答案。将在明天发布答案。

1 个答案:

答案 0 :(得分:1)

解决方案是使用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);
}
}

这有点令人费解的查找/替换,但它确实有效。