Reactive fullcalendar

calendar.js

Template.Calendar.onCreated(function () {
  const instance = this;

  instance.viewDate = new ReactiveVar();

  instance.autorun(() => {
    const viewDate = instance.viewDate.get();

    if (typeof viewDate !== 'undefined') {
      const startDate = Math.round(viewDate.start / 1000);
      const endDate = Math.round(viewDate.end / 1000);
      instance.subscribe('subscribe', startDate, endDate);
    }
  });
});

Template.Calendar.onRendered(function () {
  const instance = Template.instance();
  
  const calendar = instance.$('#calendar');

  instance.autorun(function () {

    calendar.fullCalendar({
      // options
    });

    const viewDate = instance.viewDate.get();

    if (typeof viewDate !== 'undefined') {

      if (!!instance.handle) {
        instance.handle.stop();
      }

      const someData = Collection.find({
        $or: [
          {date: {$gte: new Date(viewDate.start * 1000)}},
          {date: {$lte: new Date(viewDate.end * 1000)}}
        ]
      });

      instance.handle = someData.observeChanges({
        added: function (id, doc) {
          calendar.fullCalendar('renderEvent', {
            id, title
          }, true);
        },
        removed: function (value) {
          calendar.fullCalendar('removeEvents', value);
        }
      });

    }
  })

})

Use callback viewRender on your calendar instance.

viewRender: function (view) {
                calendar.fullCalendar('removeEvents');
                instance.viewDate.set({
                    start: view.start,
                    end: view.end
                });
            }

Hello @jurajkrivda. i have been able to implement this partially. My challenge now is with the publish query.
this is the only variation i have been able to come up with and it only works partially.

Appointments.find({start: {$gte: new Date(args.start)}}, {end: {$lte: new Date(args.end)}}, {"provider_id": args.provider_id} );

this however ignores the provider_id term and also when u less than today, it doenst work, meaing only the greater than or equal to today works.
using the $or as u explained doesn't work at all. Please help me

Solved.
Appointments.find({ start: { $gte: new Date(args.start) }, end: { $lte: new Date(args.end) }, 'provider_id': args.provider_id } Thanks
);