FullCalendar renders a single event only - meteor

Question

I'm trying to write a simple app based on FullCalendar package. When I run the code, none of the events is rendered, however right after clicking a day, an event gets shown on that day. If I click another day right after, it will erase the last one, and show the most recent one.
CalEvents = new Mongo.Collection("calevents");
// to be used later to handle editing
if (Meteor.isClient) {
Session.setDefault("event2edit", null);
Session.setDefault("showEditWindow", false);
Session.setDefault("lastMod", null);
Router.route('/', function () {
this.render('home');
});
Router.route('/calendar', function () {
this.render('calendar');
});
// runs when page has been rendered
Template.calendar.rendered = function () {
$('#calendar').fullCalendar({
events: function (start, end, timezone, callback) {
var events = [];
calEvents = CalEvents.find();
calEvents.forEach(function (evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
//alert(events.length);
callback(events);
},
dayClick: function(date, jsEvent, view){
CalEvents.insert({title:'NEW', start:date, end:date});
Session.set('lastMod', new Date());
updateCalendar();
},
eventClick: function (calEvent, jsEvent, view) {
}
});
}
Template.calendar.lastMod = function () {
return Session.get('lastMod');
}
}
var updateCalendar = function(){
$('#calendar').fullCalendar( 'refetchEvents' );
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Is it a bug? Or is my code missing something? Thank you.

Answer 1

Try to pack your
$('#calendar').fullCalendar({
into a variable, like
calendar = $('#calendar').fullCalendar({
and add the following closing of your calendar function:
}).data().fullCalendar
and insert the Tracker.autorun function at the end of your Template.calendar.rendered block:
Template.calendar.rendered = function () {
calendar = $('#calendar').fullCalendar({
events: function (start, end, timezone, callback) {
var events = [];
calEvents = CalEvents.find();
calEvents.forEach(function (evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
//alert(events.length);
callback(events);
},
dayClick: function(date, jsEvent, view){
CalEvents.insert({title:'NEW', start:date, end:date});
Session.set('lastMod', new Date());
updateCalendar();
},
eventClick: function (calEvent, jsEvent, view) {
}
}).data().fullCalendar
Tracker.autorun(function(){
allReqsCursor = CalEvents.find().fetch();
if(calendar) calendar.refetchEvents();
});
};
Additionally, for increase in Performance:
For-Loop vs forEach Loop
You might consider using the for-loop instead of forEach-loop as former is 10 to 40 times faster, especially with pre-cached parameters i and len:
forEach Loop: (Originally)
calEvents = CalEvents.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.t,
start: evt.s,
end: evt.e,
});
});
callback(events);
For loop: (10 to 40 times faster with pre-cached parameters i and len)
calEvents = CalEvents.find().fetch();
var len = calEvents.length, i = 0; //pre-cache the i and len
for(i; i < len; i++){
events.push({
id: calEvents[i]._id,
title: calEvents[i].t,
start: calEvents[i].s,
end: calEvents[i].e,
});
};
callback(events);
Hope this helps.