Vue.js: Scheduler requests having the wrong period

The Scheduler uses visibleStart() and visibleEnd() to read the current visible range boundaries in events.load(). If you make changes to startDate and days these changes will only be applied when you call update() (or when the changes are applied automatically by Vue). It is not possible to read the new visibleStart() and visibleEnd() values before update.

For the various scenarios it works like this:

1. Changes made to the config object are merged and applied automatically at the end of the current event loop cycle. This is handled by Vue. This means that you are not able to read the new values in the same cycle. You'd have to postpone event loading until the next cycle:

next() {
  Vue.set(this.config, "startDate", this.config.startDate.addMonths(1));
  Vue.set(this.config, "days", this.config.startDate.daysInMonth());

  var T = this;
  setTimeout(function() {
    T.loadEvents();
  }, 0);
}

2. If you make changes directly to the DayPilot.Scheduler changes you can call the update() method first:

previous() {
  this.scheduler.startDate = this.scheduler.startDate.addMonths(-1);
  this.scheduler.days = this.scheduler.startDate.daysInMonth();
  this.scheduler.update();
  this.loadEvents();
},

This will apply the changes and update the Scheduler and then it will request a new data set from the specified URL. Two updates will be performed - the first update is complete (it changes the timeline) and the second update is partial (it only loads and renders the events).

2.B
Or you can load the events first and update the Scheduler once to apply all changes:

previous() {
  var start = this.scheduler.startDate.addMonths(-1);
  var days = start.daysInMonth();
  var end = start.addDays(days);
  DayPilot.Http.ajax({
    url: "<myAPI>?start=" + start + "&end=" + end,
    success: function(ajax) {
      this.scheduler.update({
        startDate: start,
        days: days,
        events: ajax.data
      });
    }
  });
},

This approach (2.B) may seem more efficient as it only performs a single update but please note that it will be delayed until the events are loaded.

Generally, I'd recommend using the direct API to change the Scheduler properties and providing immediate feedback, with two updates (2.A).

Thanks for your detailed explanations!

Scenario 1 worked. When we were clicking very fast, it appeared like two clicks were in the same cycle and the request was also wrong.

Scenario 2A looks nice, but didn't work.

Scenario 2B works fine. So I will try further with solution.

Thanks a lot!

Thanks for the update!

Solution 2A will also work but you need to remove "startDate" and "days" from the config object. Otherwise the config values will get reapplied on the next change (triggered by Vue.set()) and the config values will overwrite whatever you set directly.