Skip to content Skip to sidebar Skip to footer

Making Bootstrap Calendar Render When Data Change In Meteor

I'm still struggling to get a calendar to re-render when data changes using meteor blaze. I have put in place an observerChanges function that is firing happily when added, removed

Solution 1:

FullCalendar should be instantiated only once in Template.packLayout.rendered function. I recommend to get reference of fullCalendar instance :

var calendar = nullTemplate.packLayout.rendered = function(){
   // only once !
   calendar = $('#calendar').fullCalendar({...});
}

Template.packLayout.helpers ({
  data:function(){
    allReqsCursor = Requests.find();

    var handle = allReqsCursor.observeChanges({
      added: function (id, user) {
        console.log("Request added");
      },
      removed: function () {
        console.log("Request removed");
      },
      changed: function() {
        console.log("Request changed");
        if(calendar){
          calendar.today();
        }

      }
    });
    return allReqsCursor;
  }
})

Template.packLayout.helpers.data is being rerun every time Requests collection is updated. Something like above code should help you.

Instead using Template.packLayout.helpers.data function you can use:

Deps.autorun(function(){
    allReqsCursor = Requests.find();
    // update calendar
})

Solution 2:

Use the internal calendar functions to re-render the calendar when things change:

Deps.autorun(function () {
    if (Session.equals('calendarTemplateRendered', false) ||
        !calendarSubs.ready() ||
        typeofCalendar === 'undefined') {
        console.log('exiting because there is no objects to process');
        return;
    }

    console.log('trying to autorun');
    var entries = Calendar.find().fetch(),
       $calendar = $('#calendar');
    $calendar.fullCalendar('removeEvents');
    $calendar.fullCalendar('addEventSource', entries);
    $calendar.fullCalendar('rerenderEvents');
}

Blaze does the rest for you. Dunno how efficient this is but it works pretty nicely for me. Now you can just manipulate the subscription 'Calendar' "insert, del etc' and the calendar will work properly.

Post a Comment for "Making Bootstrap Calendar Render When Data Change In Meteor"