[ANGULAR] beforeeventdropfinalize event data incorrect

Post by **carlzbg** » Fri Nov 18, 2022 11:52 am

Having upgraded to bryntum/scheduler@5.2.3 and Angular 14.2.9 the code running under Scheduler 4.3.8 now breaks.

public onSchedulerEvents(event: any) {
    /* we need to catch these events before they are finalized (in the the graph) so 
    that we can cancel them if they are not validated by the server
    */

switch (event.type) {
  case 'beforeeventdropfinalize':
  case 'beforeeventresizefinalize':

. . .

event.context.async = true;

... 
valid = ...  validate(...
event.context.finalize(valid);

When dropping or resizing the event.context.startDate is correct, but event.context.endDate has the same value as the startdate.

And the eventRecord(s) do not contain updated values.

Post by **Animal** » Fri Nov 18, 2022 2:46 pm

I see the event.context containing the correct values that the eventRecord is going to be moved to.

The eventRecord itself is of course, not changed yet.

: Screenshot 2022-11-18 at 13.41.41.png (820.9 KiB) Viewed 388 times

Post by **Animal** » Fri Nov 18, 2022 2:50 pm

For multiple records, that context only shows the startDate and endDate that the first eventRecord in the selection being dragged will move to.

The context does however has a timeDiff property which is the milliseconds change. So you can work out the new positions of all the records.

Post by **carlzbg** » Fri Nov 18, 2022 3:15 pm

I am dragging one (1) item, it is 10 days long.
I makes no sence that startDate an endDate are equal.

: Bryntum1.png (64.13 KiB) Viewed 383 times

Post by **Animal** » Fri Nov 18, 2022 3:51 pm

How did you configure your eventDrag feature? As you see from y screenshot, I do not get that result. The startDate and endDate in the context re both correct

Post by **carlzbg** » Fri Nov 18, 2022 6:15 pm

I don't think I have a particular configuration for the eventDrag...

      <bryntum-scheduler
        #scheduler
        [viewPreset]="schedulerConfig.viewPreset"
        [autoHeight]="true"
        [rowHeight]="schedulerConfig.rowHeight"
        [minHeight]="schedulerConfig.minHeight"
        [startDate]="plan.startDate"
        [endDate]="plan.endDate"
        [columns]="schedulerConfig.columns"
        [eventMenuFeature]="schedulerConfig.features.eventMenu"
        [eventEditFeature]="schedulerConfig.features.eventEdit"
        [eventRenderer]="schedulerConfig.eventRenderer"
        [eventTooltipFeature]="false"
        [createEventOnDblClick]="false"
        [scheduleTooltipFeature]="false"
        [eventTooltipFeature]="schedulerConfig.features.eventTooltip"
        [resourceColumns]="schedulerConfig.columns"
        [cellTooltipFeature]="schedulerConfig.features.cellTooltip"
        [nonWorkingTimeFeature]="schedulerConfig.features.nonWorkingTime"
        [timeRangesFeature]="schedulerConfig.features.timeRanges"
        (onCatchAll)="onSchedulerEvents($event)"
      ></bryntum-scheduler>

Post by **marcio** » Fri Nov 18, 2022 9:11 pm

Hey carlzbg,

Are you able to set up the configuration that you have in your project with a sample of data in an example project?? With that, would be easier for us to assist you, as we're not able to reproduce the behavior that you're mentioning in our demos.

Post by **carlzbg** » Sun Nov 20, 2022 2:37 pm

This simple example shows the problem - in my environment.

  features: {
    eventDrag: {
      tooltipTemplate: ({ startDate, endDate }) => {
        return (
          DateHelper.format(startDate, 'YYYY-MM-DD') +
          ' - ' +
          DateHelper.format(endDate, 'YYYY-MM-DD')
        );
      },
    },

eventResize: {
  tooltipTemplate: ({ startDate, endDate }) => {
    return (
      DateHelper.format(startDate, 'YYYY-MM-DD') +
      ' - ' +
      DateHelper.format(endDate, 'YYYY-MM-DD')
    );
  },
},

Resizing an event will show the correct startdate and enddate.
Dragging an event will show the start date value in both the startdate and enddate.

This is my time resolution:

    timeResolution: {
      unit: 'day',
      increment: 1,
    },

My events are days or weeks long.

Another disturbing thing.
In version 5.2.3 I get the newResorce object whether I dragged the event to another resource or not.
And if I do change resource, newResorce is incorrectly populated
The new resource is now in both newResorce.data and newResorce.originalData, so I have no way of validating the change.

      <bryntum-scheduler
        #scheduler
        [autoHeight]="true"
        [rowHeight]="26"
        [minHeight]="10"
        [barMargin]="3"
        [startDate]="plan.startDate"
        [endDate]="plan.endDate"
        [viewPreset]="schedulerConfig.viewPreset"
        [columns]="schedulerConfig.columns"
        [eventDragFeature]="schedulerConfig.features.eventDrag"
        [eventResizeFeature]="schedulerConfig.features.eventResize"
        [eventDragCreateFeature]="false"
        [eventMenuFeature]="false"
        [scheduleMenuFeature]="false"
        [eventEditFeature]="false"
        [eventTooltipFeature]="schedulerConfig.features.eventTooltip"
        [cellTooltipFeature]="schedulerConfig.features.cellTooltip"
        [nonWorkingTimeFeature]="schedulerConfig.features.nonWorkingTime"
        [timeRangesFeature]="true"
        [scheduleTooltipFeature]="false"
        [eventRenderer]="schedulerConfig.eventRenderer"
        [listeners]="schedulerConfig.listeners"
        [createEventOnDblClick]="false"
        [multiEventSelect]="false"
        [resourceColumns]="schedulerConfig.columns"
        (onCatchAll)="onSchedulerEvents($event)"
      ></bryntum-scheduler>

Post by **alex.l** » Mon Nov 21, 2022 4:44 am

Here is the code of runnable example that you can copy and paste into any of our Scheduler examples and check it


const scheduler = new Scheduler({
    appendTo         : 'container',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'weekAndDay',
    timeResolution  : {
        unit: 'day',
        increment: 1
    },
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    columns          : [
        { text : 'Name', field : 'name', width : 130 }
    ],
    features: {
        eventDrag: {
          tooltipTemplate: ({ startDate, endDate }) => {
            return (
              DateHelper.format(startDate, 'YYYY-MM-DD') +
              ' - ' +
              DateHelper.format(endDate, 'YYYY-MM-DD')
            );
          }
        },
        eventResize: {
            tooltipTemplate: ({ startDate, endDate }) => {
                return (
                DateHelper.format(startDate, 'YYYY-MM-DD') +
                ' - ' +
                DateHelper.format(endDate, 'YYYY-MM-DD')
                );
            }
        }
    }
});

Please see video attached. We cannot reproduce the issue. Please create a runnable test case and attach it here, so we will be able to debug it and confirm a bug or find a reason of unexpected behaviour.

Post by **carlzbg** » Mon Nov 21, 2022 4:14 pm

Your demo examples work beautifully. I can insert your code and endDate updates as it should.

But if I insert the same code in my Angular app, the problem remains.

  ngAfterViewInit() {

const resources = [
    { id: 'r1', name: 'Mike' },
    { id: 'r2', name: 'Linda' },
    { id: 'r3', name: 'Don' },
    { id: 'r4', name: 'Karen' },
    { id: 'r5', name: 'Doug' },
    { id: 'r6', name: 'Peter' },
    { id: 'r7', name: 'Sam' },
    { id: 'r8', name: 'Melissa' },
    { id: 'r9', name: 'John' },
    { id: 'r10', name: 'Ellen' },
  ],
  events = [
    {
      id: 1,
      resourceId: 'r1',
      startDate: new Date(2017, 0, 1, 10),
      endDate: new Date(2017, 0, 1, 12),
      name: 'Click me',
      iconCls: 'b-fa b-fa-mouse-pointer',
    },
    {
      id: 2,
      resourceId: 'r2',
      startDate: new Date(2017, 0, 1, 12),
      endDate: new Date(2017, 0, 1, 13, 30),
      name: 'Drag me',
      iconCls: 'b-fa b-fa-arrows-alt',
    },
    {
      id: 3,
      resourceId: 'r3',
      startDate: new Date(2017, 0, 1, 14),
      endDate: new Date(2017, 0, 1, 16),
      name: 'Double click me',
      eventColor: 'purple',
      iconCls: 'b-fa b-fa-mouse-pointer',
    },
    {
      id: 4,
      resourceId: 'r4',
      startDate: new Date(2017, 0, 1, 8),
      endDate: new Date(2017, 0, 1, 11),
      name: 'Right click me',
      iconCls: 'b-fa b-fa-mouse-pointer',
    },
  ];
const scheduler2 = new Scheduler({
  appendTo: 'container',
  resources: resources,
  events: events,
  startDate: new Date(2017, 0, 1, 6),
  endDate: new Date(2017, 0, 1, 20),
  viewPreset: {
    base: 'weekAndDay',
    timeResolution: {
      unit: 'day',
      increment: 1,
    },
    rowHeight: 50,
    barMargin: 5,
    multiEventSelect: true,
    columns: [{ text: 'Name', field: 'name', width: 130 }],
    features: {
      eventDrag: {
        tooltipTemplate: ({ startDate, endDate }) => {
          return (
            DateHelper.format(startDate, 'YYYY-MM-DD') +
            ' - ' +
            DateHelper.format(endDate, 'YYYY-MM-DD') +
            ' bryntcode'
          );
        },
      },
      eventResize: {
        tooltipTemplate: ({ startDate, endDate }) => {
          return (
            DateHelper.format(startDate, 'YYYY-MM-DD') +
            ' - ' +
            DateHelper.format(endDate, 'YYYY-MM-DD')
          );
        },
      },
    },
  },
});

See the picture. I'm dragging a long event and endDate is not updating

Support Forum

[ANGULAR] beforeeventdropfinalize event data incorrect