2

I am having difficulties with the Fullcalendar. Basically I have to use ajax to fetch events month by month as otherwise it takes too long to render the calendar as events are quite complex. I can fetch events and add them to the calendar no problem, but the issue is that when you you add new data source all events are rendered fine, but the dayRender event never gets triggered so my custom backgrounds and qtips are not applied as they should as they only getting applied during the dayRender event.

There is an option to Destroy and Then Render the calendar (redraw the calendar) to trigger the dayRender event, but for some reason if I am doing:

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

calendar is getting destroyed but never recreated -> nothing happens (no warnings or error messages either).

Is there a way to call dayRender event after the calendar has been initialised in the similar manner as $('#calendar').fullCalendar( 'addEventSource', myevents ); ?

Or maybe you can offer some alternative solutions?

ANSWER:

Ok, so after hours of trying different things I believe I have found a workaround:

  1. When you first initialize calendar you create an array of future events and add 1 dummy record to it (otherwise it wont create the calendar).
  2. Use this array to initialise the calendar.
  3. Create your ajax calls to add new data sources for calendar and push the events into the array you have created in the first step.
  4. After you pushed events into the main array execute the following code:

$('#calendar').fullCalendar('prev'); $('#calendar').fullCalendar('next');

And for some reason that will call the dayRender event.

2 Answers 2

4

Ok, so after hours of trying different things I believe I have found a workaround:

When you first initialize calendar you create an array of future events and add 1 dummy record to it (otherwise it wont create the calendar). Use this array to initialise the calendar. Create your ajax calls to add new data sources for calendar and push the events into the array you have created in the first step. After you pushed events into the main array execute the following code:

$('#calendar').fullCalendar('prev');
$('#calendar').fullCalendar('next');

And for some reason that will call the dayRender event.

0

Followup to uFlock... had same issue. This function is called after my AJAX retrieval of my DB model events, which get expanded (they indicate repetition). I then use the "hack" uFlock posted, which solved same issue I was facing.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.