Event rendering on copy

Note that progressive rendering is disabled

Most likely, the problem is that the new event has the same ID as the original one. After recent changes, the Scheduler requires each event to have a unique ID. This applies since the various event identity comparison methods has been unified to ID comparison.

In the last release (https://javascript.daypilot.org/daypilot-pro-for-javascript-2018-4-3469/), this rule is enforced and you will get an exception when duplicate IDs are detected.

You can fix it by assigning the event copy a different ID - preferably one received from the server side.

Let me know if this doesn't help.

Hi Dan,

Thanks for your reply. I do not think that the 2 events have the same ID. I will investigate but let me know which issue of the 2 issues I mentioned above should be fixed by enforcing a unique ID?

It could affect both issues.

Could you please give it a try and let me know if it helped? Such an issue would be hard to explain by another cause.

If it doesn't help, would you be able to create an example which reproduces the problem?

I checked. No duplicate IDs. I am not sure I can create a simple example that reproduces the problem. But after disabling "eventUpdateInplaceOptimization" it seems that calling dps.update() after adding/removing events fixes the first issue. I am still not sure that it is totally fixed. We are still testing. But I'd rather have this fixed properly rather than using this workaround.

OK, thanks for the update. Could you please post your config and the DayPilot Pro version that you are using?

I am using DayPilot Pro for JavaScript 2018.3.3400

Check below the code that creates the scheduler. It references some other functions that set widths & heights but the basic configuration is in this function. If you need the other functions just let me know.

  CreateScheduler: function (scheduler) {
            var instance = this;

            var days = scheduler.data('days');

            var dp = new DayPilot.Scheduler(scheduler.attr('id'));
            scheduler.data('dp', dp);
          
            var cellWidth = instance.GetCellWidth(days);
            instance.SetCellWidth(dp, cellWidth);
            instance.SetCellHeight(false);

            instance.SetTimeHeaderHeight(dp);

            instance.SetSchedulerHeight(scheduler);

            dp.eventMarginRight = instance.settings.cellMargin;
            dp.eventMarginLeft = instance.settings.cellMargin;
            dp.eventMarginTop = instance.settings.cellMargin;
            dp.eventMarginBottom = instance.settings.cellMargin;

            // view            
            dp.startDate = new DayPilot.Date(scheduler.data('start'));
            dp.days = days;
            dp.scale = instance.scale;
            dp.timeHeaders = instance.timeHeaders;       

            //theme
            dp.cssClassPrefix = instance.settings.themeClass;
            dp.cssOnly = true;

            //resources
            dp.treeEnabled = false;

            //cell click handling
            dp.timeRangeSelectedHandling = "Disabled";

            //enable event double click
            dp.eventDoubleClickHandling = true;

            //dp.eventUpdateInplaceOptimization = true;

            //disable progressive rendering
            dp.dynamicEventRendering = "Disabled";
            //dp.progressiveRowRendering = false;

            //allow dragging between schedulers
            if (instance.numberOfSchedulers > 1) {
                dp.dragOutAllowed = true;
            }

            instance.DisplayVerticalSeparators(scheduler);

            //Handle scheduler events
            dp.onBeforeTimeHeaderRender = function (args) { instance.OnBeforeTimeHeaderRender(instance, scheduler, args); };
            dp.onBeforeResHeaderRender = function (args) { instance.OnBeforeResHeaderRender(instance, scheduler, args); };
            dp.onBeforeEventRender = function (args) { instance.OnBeforeEventRender(instance, scheduler, args); };
            dp.onBeforeCellRender = function (args) { instance.OnBeforeCellRender(instance, scheduler, args); };
            dp.onEventMove = function (args) { instance.OnEventMove(instance, scheduler, args); };
            dp.onEventMoving = function (args) { instance.OnEventMoving(instance, scheduler, args); };
            dp.onAfterRender = function (args) { instance.OnAfterRender(instance, scheduler, args); };            
            dp.onEventDoubleClick = function (args) { instance.onEventDoubleClick(instance, scheduler, args); };            

            instance.CreateDpContextMenu(scheduler);

            dp.init();

            setTimeout(function () {
                instance.LoadResources(scheduler);

                //events
                instance.LoadEvents(scheduler);
            }, 0);
        }

Thanks, Aliaa.

I've reviewed the in-place optimization logic that is used in events.add(). The in-place rendering is only allowed when there is no overlapping event at that place (which would cause a row height change). The event is always rendered at the top of the row (as it assumes no overlaps).

The check for overlaps compares the event resource, start and date but it excludes the event itself - which is checked using identity comparison. This leads back to the id problem. I don't see any other situation where it would allow an in-place rendering over an existing event.

Could you please give it a try using the latest release (https://javascript.daypilot.org/daypilot-pro-for-javascript-2018-4-3469/)? The last version checks the id during events.add() call - it will make sure that this is not the problem.

Thanks, Dan. I will do that tomorrow and will get back to you.

I tried version 2018.4.3469. Still the same issue.

Thanks, Aliaa. Unfortunately, I'm not able to reproduce the issue and there is also no obvious problem in the code. If you were able to create an HTML page that reproduces the problem that would definitely help.