fullcalendar not rendering correctly with meteor

Question

Another try to get this one sorted. I have created a repo at https://github.com/pnunn/testFullCalendar which has a running meteor app that shows the problem with meteor not rendering the calender correctly.

When first loaded, there are no visible events on the calendar. Navigate to the previous or next month and back again, and magically the events appear. If you click on an event and change one of the check boxes (the event color should change) the event is again not rendered either at all, or correctly until the page is manually refreshed.

Can anyone tell me how to fix this please? I've tried calling re-render, eventRender and every combination of functions from the calendar docs, but have yet to crack the magic one.

Thanks.

Peter.

Answer 1

As per latest Meteor 1.5.2 as on date and fullcalendar:fullcalendar below is the working code,

Template.packLayout.rendered = function(){
  calendar = $('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) { // timezone added here
      // same code
    },
    editable:true,
    weekMode: 'liquid',
  }).data().fullCalendar;

  this.autorun(function(){ // Deps.autorun replaced here
    // same code
  })
};

Note: function( start, end, timezone, callback ) { } is the latest events method as per [https://fullcalendar.io/docs/event_data/events_function/][1]

Answer 2

Fix for your issues are in https://github.com/parhelium/testFullCalendar.

First, reference to instance of Calendar is needed

calendar =  $('#calendar').fullCalendar({...}).data().fullCalendar;

Function using Requests.find() can be wrapped with Deps.autorun to rerun it every time Requests collection is updated:

    Template.packLayout.rendered = function(){

  calendar = $('#calendar').fullCalendar({
    dayClick:function( date, allDay, jsEvent, view ) {
      Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
      Session.set('lastMod',new Date());
    },
    eventClick:function(reqEvent,jsEvent,view){
      Session.set('editingReqEvent',reqEvent.id);
      Session.set('showEditEvent',true);
    },
    eventDrop:function(reqEvent){
      Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
      Session.set('lastMod',new Date());
    },
    events: function(start, end, callback) {
      var events = [];
      reqEvents = Requests.find({},{reactive:false});
      reqEvents.forEach(function(evt){
        event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
        events.push(event);
      })
      callback(events);
    },
    editable:true,
    weekMode: 'liquid',
  }).data().fullCalendar;

  Deps.autorun(function(){
    allReqsCursor = Requests.find().fetch();
    console.log("Autorun -> ", allReqsCursor.length)
    if(calendar)
        calendar.refetchEvents();
  })
};