title: Optimising fullcalendar with meteor for large data
body: <p>I'm using an auto-run block where I re-execute the same mongo with a few session variables ! loop over those doc , construct an array of events then I call the addEventSource and refetchResources function which are pretty expensive computationally !  the fullcalendar becomes slow the more data ! on every action the auto-run block is rerun !  what in your in your opinion can be done to speed things up ? I thought about only re-rendering the delta elements but this doesn't cover the deletion and update .</p>
  
  <pre><code>   calendar = $('#calendar').fullCalendar({
      schedulerLicenseKey: Meteor.settings.public.fullCalendarLicenseKey,
      now: new Date(),
      editable: true, // enable draggable events
      droppable: true, // this allows things to be dropped onto the calendar
      aspectRatio: 1.8,
      timezone:'local',
      disableDragging: true,
      displayEventTime: false,
      selectable:true,
      allDaySlot:true,
      slotDuration:'24:00',
      lazyFetching:true,
      resourceLabelText: 'Employees',
      nextDayThreshold:"12:00",
      resources: function(callback) {
        var tmp_obj = { usersSorting : { } };
        tmp_obj.usersSorting["indexByLocation."+Session.get("locationId")] = 1;
        var users = [];
        var data = Meteor.users.find({
          $or:[
            {"profile.showInScheduler":{$exists:false}},
            {"profile.showInScheduler":true}
          ],
          assignedTo:{$in:[Session.get("locationId")]},
          'locations._id':Session.get("locationId"),
          "profile.companyId":Session.get("companyId")
        },{sort : tmp_obj.usersSorting});
  
        var arr = data.map(function(c) {
          var employeeType = c.userSettings.employeeType;
          var type = EmployeeType.findOne({_id:employeeType});
          var img = Images.findOne({_id: c.picture});
          var imgUrl = img ? img.url() : "/images/default-avatar.png";
          c.name = c.name || "";
  
          var totalHoursAllLocation = 0;
          var totalHoursCurrentLocation = 0;
          return {
            id: c._id,
            title: "t",
            width:"2px"
          };
        });
        callback(arr);
      },
      drop: function(date, jsEvent, ui, resourceId) {
      },
      eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view )  {
      },
      dayClick: function(date, jsEvent, view,res,res2) {
  
      },
      eventClick: function ( event, jsEvent, view )  {
      }
    }).data().fullCalendar;
  
  
    /********************* reactive calendar *****************/
    this.autorun(function() {
  
  
    if(Session.get("activeUsers")) {
      schedulerSubs = Meteor.subscribe("SchedulesByLocation", Session.get("companyId"), Session.get("locationId"), Session.get("activeUsers"), moment(Session.get("currentDate")).startOf('week').toDate(), moment(Session.get("currentDate")).startOf('week').add(2, "weeks").endOf('isoweek').add(1,"days").toDate());
    }
  
      const company = Companies.findOne({_id: Session.get("companyId")});
      Session.set("loading", true);
      let events = [];
      let usersInLocation = Meteor.users.find({
        assignedTo: {$in: [Session.get("locationId")]},
        'locations._id': Session.get("locationId"),
        "profile.companyId": Session.get("companyId")
      }).fetch();
      let userIds = _.map(usersInLocation, "_id");
      userIds.push("temp" + Session.get("companyId") + Session.get("locationId"));
      Session.set("activeUsers",userIds);
      if(schedulerSubs &amp;&amp; schedulerSubs.ready()) {
        var data;
  
      SchedulerEvts = Schedules.find({
        uid: {$in: userIds},
        locationId: Session.get("locationId"),
        companyId: Session.get("companyId"),
        start: {$gte: moment(Session.get("currentDate")).startOf('week').toDate()},
        end: {$lte: moment(Session.get("currentDate")).add(2, "week").endOf('isoweek').toDate()}
      }).fetch();
  
        SchedulerEvts.forEach(function (evt) {
          var event = null;
          var color = "";
          var oloc = "";
          var attendance = null;
          var locationName = "";
          var id = evt._id;
  
  
        event = {
          id:id,
          type : evt.type,
          title: evt.name,
          start: evt.start,
          end: evt.end,
          color:color,
          resourceId: evt.uid,
          locationName:locationName,
  
        };
  
          events.push(event);
        });
  
  
        if (calendar) {
          calendar.removeEvents();
          calendar.addEventSource(events);
          calendar.refetchResources();
        }
      }
  </code></pre>