I'm trying to find a way of hiding the calendar (when the user clicks next/prev) while the events are being rendered, then show everything once it is all rendered. The issue is that the calendar loads first then the events are laid on top but I would like them to load at the same time. There are a couple approaches that seem to be on the right track but the difficulty I am having is targeting the correct elements.
Loading callback - http://jsfiddle.net/gmm8b/25/ I tried a hide/show of the calendar with the if/else statements but resulted in this calendar without events. Can a a calendar not be populated when it is hidden? or am I incorrectly targeting what to hide/show?
loading: function (bool) {
if (bool) {
//$('#calendar').hide();
//alert('The calendar is being populated with events - needs to be hidden');
} else {
//$('#calendar').show();
//alert('Once all the events are rendered - show ');
// bind to all your events here
}
},
EventRender - http://jsfiddle.net/gmm8b/27/ The other thing I tried is using the eventRender callbacks ended up with similar problems.
eventRender: function ( view ) {
//$("#calendar").hide();
//$("#calendar").addClass('hidden');
},
eventAfterRender: function ( view ) {
//$("#calendar").show();
//$("#calendar").removeClass('hidden');
},
If anyone can give an example or explain an approach, it will be greatly appreciated.
Thank you.
Turn off visibility instead of hiding because visibility preserves the layout and allows the events to render in their proper place. Then once everything is fully rendered, turn visibility back on.
loading: function (bool) {
if (bool) {
$("#calendar").css({"visibility": "hidden"});
//alert('Rendering events');
} else {
$("#calendar").css({"visibility": "visible"});
//alert('Rendered and ready to go');
}
},