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

Scheduler hangs when drag/drop event from one scheduler instance to the next with autoScroll set to Drag

Asked by Tiha Juhasz
2 years ago.

We use DayPilot Pro Scheduler for Angular 2+. Setup:
2 scheduler items instantiated with autoScroll set to drag and the following options:
eventHeight: 60,
heightSpec : 'Max',
height: 350,
cellWidthSpec: 'Auto',
cellWidthMin: '25',
rowMinHeight: 70,
dragOutAllowed: true,
durationBarVisible: false,
allowEventOverlap: true,
floatingEvents: true,
autoScroll: 'Drag',
dynamicLoading: true,
theme: 'classicpackaging',
cssOnly: true,
eventResizeHandling: 'Disabled',
viewType: 'Days',
days: 5,
timeHeaders: [{ 'groupBy': 'Hour' }],
scale: 'CellDuration',
cellDuration: 15,
businessBeginsHour: '7',
businessEndsHour: '19',

When drag/drop from one scheduler to the other, if autoScroll is set to Drag and both scheduler instances scroll when drag/dropping the event, the following error occurs:

ERROR TypeError: Cannot read property 'calendar' of null
at daypilot-angular.min.js:18361
at HTMLDocument.n.gMouseUp (daypilot-angular.min.js:18364)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at ZoneTask.invokeTask [as invoke] (zone.js:499)
at invokeTask (zone.js:1540)
at HTMLDocument.globalZoneAwareCallback (zone.js:1577)

daypilot-angular.min.js is unminified here, so the crashing code segment is quoted below:

if (DayPilot.Util.removeClass(n.moving, o.q(o._k.eventMovingSource)), function() {
if (n.drag && n.drag.schedulerSourceEvent) {
var e = n.drag.schedulerSourceEvent,
t = e.event.calendar;
DayPilot.Util.removeClass(e, t.q(o._k.eventMovingSource))
}
}(), !n.movingShadow.row) return void t();

that is, the crashing row is: t = e.event.calendar;
e.event is null.

Comment posted by Tiha Juhasz
2 years ago.

By the term "both scheduler items scroll when drag/dropping an event" I mean that while moving the event from one scheduler to the other, the autscroll is triggered in both scheduler items one after the other.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

What version of DayPilot do you use (version number, full/trial)?

Comment posted by Tiha Juhasz
2 years ago.

I use version: 3068, full (paid) version.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Can you try switching to the latest release (2018.1.3169)? Let me know if it didn't help.

Comment posted by Tiha Juhasz
2 years ago.

Installed the latest version from
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2018.1.3169.tar.gz --save

But I still get the same error.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

I'm checking the problem, please hold on.

Comment posted by Tiha Juhasz
2 years ago.

Thank you. Let me know if you need any more details.

One issue that might cause the bug:
The scheduler items refer to different machines selected by the user. So the app generates the scheduler items on-the-fly for the machines. In the view we have the following code:

<daypilot

  • scheduler [events]="events" #scheduler></daypilot-scheduler>

In the ts code we access the scheduler item with @ViewChild:

@ViewChild('scheduler')
scheduler: DayPilotSchedulerComponent;

The id of the DOM node is #scheduler for every scheduler instance created because the app cannot set the ID dynamically.

It is not likely, but can this cause a mixup between scheduler instances on the same page?

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Thanks for the hint - but that shouldn't be a problem. The Angular identifier doesn't get translated to DOM id attribute. The Scheduler uses its own automatically-generated unique id.

Does it also happen when you turn off the auto scroll?

Comment posted by Tiha Juhasz
2 years ago.

The error doesn't happen with auto scroll turned off.

The issue is that we need auto scroll for moving events around on the scheduler so it cannot be turned off.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Unfortunately I'm not able to reproduce the issue.

However, the latest sandbox build includes a couple of changes that could fix the problem for you. Could you please give it a try (2018.1.3182)?

Comment posted by Tiha Juhasz
2 years ago.

Tested it with both versions 3169 and 3182. The error on drag-drop with autoscroll across machines is gone, but after every scroll event I always gott the following error:

core.es5.js:1020 ERROR TypeError: Cannot read property 'length' of undefined
at DayPilot.Scheduler.mg (daypilot-angular.min.js:29)
at e (daypilot-angular.min.js:29)
at daypilot-angular.min.js:29

The issue was that the function called for the onScroll event was empty (only containing a console.log), so I had to add

args.async = true;
args.loaded();

So now everything works fine.

One issue though: I have the DEMO badge in the upper left corner of the scheduler instances. I can send you the customer data for the purchase. Please give me an email address to send it to or any other method how to update to the paid version of 3169.

Comment posted by Tiha Juhasz
2 years ago.

Found the update method and did the update. Thank you for your patience and support with this bug.

Answer posted by Dan Letecky [DayPilot]
2 years ago.

Thanks for the update!

It turned out that there was a bug in onScroll() call. It's fixed now in the latest build (2018.1.3185) - please let me know if the problem persists.

The development builds are only available as a trial version. However, a new release with these fixes included will be available by Friday. You'll be able to get it using npm.daypilot.org or in the customer area. Please let me know if you can't wait (support@daypilot.org).

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.