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

Scheduler fromStringSortable throwing exceptions

Asked by David
1 month ago.

Hi, Im trialing this library at the moment. We have it wired up, and all displays correctly, works great. We have moved up to see how it handles large datasets.

Currently it spends 10 seconds rendering the calendar with 3000~ events, and a full 8 of those seconds is fromStringSortable throwing exceptions telling me the dates are in the incorrect format.
Also occurs onScroll etc.

The error message says - "Invalid string format (use '2010-12-31' or '2010-12-31T23:50:00'): 2021-10-25"
You can see at the end - I am providing it in the format it wants.

Start/end is generated from -

toCalendarDateString(date: Date): string {
    return date.toISOString().split('T')[0];
}

Is this a known issue?
Difficult to debug this with the minified version. Build - 2021.2.4990

Thanks!

Comment posted by Dan Letecky [DayPilot]
1 month ago.

The date string looks fine but there might be something like an extra space that makes it incompatible with the required format.

If the problem persists, would you be able to create an example that reproduces the issue? The string values of start/end properties are converted to DayPilot.Date using the constructor (https://api.daypilot.org/daypilot-date-constructor/).

The following examples seem to work fine:

1.
new DayPilot.Date("2021-10-25");
2.
function toCalendarDateString(date) {
  return date.toISOString().split('T')[0];
}
new DayPilot.Date(toCalendarDateString(new Date()));

The Scheduler should be able to load 3000 events in <1s. You can use the following project as a reference:
https://code.daypilot.org/86168/angular-scheduler-loading-400000-events

It loads up to 400,000 events statically. With 400k events it's not super fast but it still doesn't take more than a few seconds.

Comment posted by David
1 month ago.

Don't suppose you have some example jsfiddle/codepen/plunkr angular sandboxes already configured?

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Unfortunately, these online tools don't support remote URL modules that we use. But you can create a blank Angular project with a pre-configured Scheduler here:

https://builder.daypilot.org

If you post your modifications of scheduler.component.ts here it should be enough to reproduce the issue.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

I'm checking your screenshots again and it looks like you are using the [events] attribute to load the event data. That will only work well for small datasets - the change detection logic needs to go through all events in the new data set and compare them with the previous version.

To support large dataset, it's better to use the direct API as explained here:
https://doc.daypilot.org/scheduler/angular-performance/

Example:

const events = [...];  // new event data set
this.scheduler.control.update({events});

However, that still doesn't explain the parsing error which is very strange.

Comment posted by David
1 month ago.

Not sure what to make of this but - appending a timestamp resolved my perf issues.

toCalendarDateString(date: Date): string {
return date.toISOString().split('T')[0] + 'T00:00:00'; // sub second
// return date.toISOString().split('T')[0]; // 8 second
}

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Thanks for the update!

I don't want to bother you with this but I would like to dig a bit deeper and try to find out what happened. So if you were able to create the reproduction sample it would be great. But no problem if you don't want to spend your time on this.

These two lines should behave exactly the same:

new DayPilot.Date("2021-10-25");
new DayPilot.Date("2021-10-25T00:00:00");
Comment posted by David
1 month ago.

Appreciate the fast support, indeed I can't explain much of what im debugging.
Following the call stack up, I can call the same function with the same params and not trigger the exception.

I'll try and create a basic repo tomorrow.

Comment posted by David
1 month ago.

To reproduce - from this base - https://code.daypilot.org/86168/angular-scheduler-loading-400000-events

data.service.ts

```
this.events.push({
id: id,
resource: y,

// Fast
// start: (start.addDays(x) as any).value, // YYYY-MM-DDT00:00:00
// end: (start.addDays(x + 1) as any).value, // YYYY-MM-DDT00:00:00

// Slow
start: (start.addDays(x) as any).value.split('T')[0], // YYYY-MM-DD
end: (start.addDays(x + 1) as any).value.split('T')[0], // YYYY-MM-DD
text: 'Scheduler Event ' + id
});
```

Comment posted by David
1 month ago.

1 second vs 25 seconds on my machine.

Comment posted by David
1 month ago.

In case its relevant - im in BST timezone -

new Date() = Tue Oct 26 2021 20:36:28 GMT+0100 (British Summer Time) {}

I only mention it as dates are the worst - and potentially not providing a time component is wrapping it around to the previous day.

Answer posted by Dan Letecky [DayPilot]
1 month ago.

Thanks!

That helped to identify the performance issue. It should be fixed now in the latest sandbox build (2021.4.5128, see https://npm.daypilot.org/ for the Angular version).

The constructor used to create an exception object in advance and that was causing a performance problem. The exception object is now created lazily and the problem is fixed. It's still not clear why it performed well in case of a full date/time string as there is no obvious reason for that.

Please let me know if it doesn't fix the problem for you.

And a note: If you want to create a DayPilot.Date object from Date, the best way is to use the constructor like this:

const date = new Date();
const dpDate = new DayPilot.Date(date, true);

The second parameter ("true") will ensure that it will use the local date representation and not the GMT base. This will be faster than converting the date to a string and parsing it.

Thanks again!

New Reply
This reply is
Your name (optional):