JQuery Fullcalendar-在添加新数据源时触发dayRender

JQuery Fullcalendar - trigger dayRender on adding new data source

本文关键字：dayRender 数据源 Fullcalendar- 添加 JQuery      更新时间：2023-09-26

我在使用Fullcalendar时遇到了困难。基本上，我必须使用ajax按月获取事件，否则由于事件非常复杂，渲染日历需要很长时间。我可以获取事件并将其添加到日历中，这没有问题，但问题是，当您添加新的数据源时，所有事件都会被渲染得很好，但dayRender事件从未被触发，因此我的自定义背景和qtip没有按应用方式应用，因为它们只在dayRender事件期间应用。

有一个选项可以销毁然后渲染日历（重新绘制日历）来触发dayRender事件，但出于某种原因，如果我正在这样做：

$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');

日历正在被销毁，但从未重新创建->什么都没有发生（也没有警告或错误消息）。

有没有一种方法可以在日历以类似于$('#calendar').fullCalendar( 'addEventSource', myevents );的方式初始化后调用dayRender事件？

或者你可以提供一些替代方案？

答案：

好吧，经过几个小时的尝试，我相信我找到了一个变通方法：

  1. 当你第一次初始化日历时，你会创建一个未来事件的数组，并向其中添加一个伪记录（否则它不会创建日历）
  2. 使用此数组初始化日历
  3. 创建ajax调用，为日历添加新的数据源，并将事件推送到第一步中创建的数组中
  4. 将事件推入主数组后，执行以下代码：

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

相关文章：