FullCalendar renders a single event only

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.