search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Vue.js: Scheduler requests having the wrong period

Asked by Benny Luz
14 days ago.

Dear Sir or Madam,

I'm evaluating your scheduler as vue.js component. Therefore I downloaded your example from the following page (Button "Download source"): https://code.daypilot.org/46517/vue-js-scheduler-changing-visible-date

The scheduler shall load its data from an API. So I made the following changes:
The methods for loading events and resources were changed.

loadEvents() {
       this.scheduler.events.load("<myAPI>");
},
loadResources() {
      this.scheduler.rows.load("<myAPI>");
}
I also changed the methods for switching the month:
previous() {
      this.scheduler.startDate = this.scheduler.startDate.addMonths(-1);
      this.scheduler.days = this.scheduler.startDate.daysInMonth();
      this.loadEvents();
      this.scheduler.update();
},
next() {
      Vue.set(this.config, "startDate", this.config.startDate.addMonths(1));
      Vue.set(this.config, "days", this.config.startDate.daysInMonth());
      this.loadEvents();
      this.scheduler.update();
}

The occurring error:
The scheduler requests the wrong period.
The scheduler starts with displaying November 2020, today is 18.11.2020. The requests contains the parameters start=2020-11-01T00:00:00&end=2020-12-01T00:00:00 (correct so far)

So I click the Button "next" and the next request is sent.
It's parameters: start=2020-11-01T00:00:00&end=2020-12-01T00:00:00
Expected: start=2020-12-01&end=2020-12-31

And a second click on "next" and a further request:
It's parameters: start=2020-12-01T00:00:00&end=2021-01-01T00:00:00
Expected: start=2021-01-01&end=2021-01-31

Conclusion
The parameters start and end for requesting events are wrong. It seems like the events are requested before the changes to start and end are made.

The file with my changes is attached.

Kind regards
Benny Luz

Answer posted by Dan Letecky [DayPilot]
14 days ago.

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:

2.A
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).

Comment posted by Benny Luz
14 days ago.

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!

Comment posted by Dan Letecky [DayPilot]
14 days ago.

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.

New Reply
This reply is
Your name (optional):