我在使用Fullcalendar时遇到了困难。基本上,我必须使用ajax按月获取事件,否则由于事件非常复杂,渲染日历需要很长时间。我可以获取事件并将其添加到日历中,这没有问题,但问题是,当您添加新的数据源时,所有事件都会被渲染得很好,但dayRender事件从未被触发,因此我的自定义背景和qtip没有按应用方式应用,因为它们只在dayRender事件期间应用。
有一个选项可以销毁然后渲染日历(重新绘制日历)来触发dayRender事件,但出于某种原因,如果我正在这样做:
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
日历正在被销毁,但从未重新创建->什么都没有发生(也没有警告或错误消息)。
有没有一种方法可以在日历以类似于$('#calendar').fullCalendar( 'addEventSource', myevents );
的方式初始化后调用dayRender事件?
或者你可以提供一些替代方案?
答案:
好吧,经过几个小时的尝试,我相信我找到了一个变通方法:
- 当你第一次初始化日历时,你会创建一个未来事件的数组,并向其中添加一个伪记录(否则它不会创建日历)
- 使用此数组初始化日历
- 创建ajax调用,为日历添加新的数据源,并将事件推送到第一步中创建的数组中
- 将事件推入主数组后,执行以下代码:
$('#calendar').fullCalendar('prev');
$('#calendar').fullCalendar('next');
由于某种原因,它将调用dayRender事件。
好吧,经过几个小时的尝试,我相信我找到了一个解决办法:
当你第一次初始化日历时,你会创建一个未来事件的数组,并向其中添加一个伪记录(否则它不会创建日历)。使用此数组初始化日历。创建ajax调用,为日历添加新的数据源,并将事件推送到第一步中创建的数组中。将事件推送到主数组后,执行以下代码:
$('#calendar').fullCalendar('prev');
$('#calendar').fullCalendar('next');
由于某种原因,它将调用dayRender事件。
uFlock的后续操作。。。有同样的问题。这个函数是在AJAX检索数据库模型事件后调用的,这些事件得到了扩展(它们表示重复)。然后我使用uFlock发布的"破解",解决了我面临的同样问题。
function gsearchRender_calendar(data){
var dest = $("#gsearch-content .tab[data-tab='gsearch-tab-calendar'] .events-con");
var calendar = $(dest).fullCalendar('getCalendar');
var method = $("#gsearch-content [name='gsearch-method']").val();
var ctx = method.split(/,/)[0];
calendar.removeEventSource("gsearch");
calendar.addEventSource({
id:'gsearch',
color:(ctx=='happening') ? 'green' : 'white',
textColor:'black',
editable:false,
events: function(start, end, timezone, callback) {
//var period = this.constraints.eventManager.currentPeriod;
var raw = expandHappeningEvents(data.results, start, end);
callback(raw);
}
});
//calendar.refetchEventSources('gsearch');
calendar.prev();
calendar.next();
}