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

    }
  })

})

Thank you very much for this. please explain how your subscription is done to be able to accept start and end date. thanks

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