FullCalendar отображает только одно событие

Question

Я пытаюсь написать простое приложение на основе пакета FullCalendar. Когда я запускаю код, ни одно из событий не отображается, однако сразу после нажатия дня в этот день отображается событие. Если я нажму на другой день сразу после этого, он сотрет последний и покажет самый последний.

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

Это ошибка? Или мой код что-то отсутствует? Спасибо.

Answer 1

Попробуйте упаковать

$('#calendar').fullCalendar({ 

в переменную, как

calendar = $('#calendar').fullCalendar({ 

и добавьте следующий закрытие календаря функции:

}).data().fullCalendar 

и вставить функцию Tracker.autorun в конец вашего блока Template.calendar.rendered:

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

Кроме того, для увеличения производительности:

For-Loop против Foreach Loop

Вы могли бы рассмотреть вопрос об использовании for -loop вместо forEach -loop, как бывший 10 до 40 раз быстрее , особенно с предварительно кэшировать параметры i и len:

Foreach Loop: (Origina LLY)

 calEvents = CalEvents.find(); 
     calEvents.forEach(function(evt) { 
      events.push({ 
       id: evt._id, 
       title: evt.t, 
       start: evt.s, 
       end: evt.e, 
      }); 
     }); 
     callback(events); 

Для цикла: (от 10 до 40 раз быстрее, с предварительно кэшируются параметрами я и 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); 

Надеется, что это помогает.