Our pure JavaScript Scheduler component


Post by christian spiller »

Hello Bryntum!

We integrate the Scheduler Pro in our Angular-app. I think since version 6.x we encountered some problems when copy and paste events.

Environment:
MacOS 14.5
FireFox 128.0.3
Bryntum 6.0.1 (and version of Demos)

I describe two problems which seem related.

1. beforeAdd listener on AssignmentStore:
When copying two Scheduler-Events an paste them, the second beforeAdd-event does not contain the Scheduler-Event object but the EventId. We need the object to add some properties.

Problem 1.mov
(6.78 MiB) Downloaded 11 times

Reproduce:

  • Open Demo: https://bryntum.com/products/scheduler/examples/multiassign-resourceids/
  • Add AssignmentStore with beforeAdd-listener and log event.records[0].originalData.event
  • Create an additional Event for 'Macy'
  • Select the two Events from 'Macy' and copy
  • Paste on 'Macy'
    => The first console entry logs the event object (as expected)
    => The second console entry logs the eventId (but we would expect again an object)
    => There are additional logs about 'Duplicate assignment of event x to resource y'
import { AssignmentStore, Scheduler, EventModel } from '../../build/scheduler.module.js?478494';
import shared from '../_shared/shared.module.js?478494';

// Making a custom EventModel to enable resourceIds field usage
class CustomEventModel extends EventModel {
    static $name  = 'CustomEventModel';
    static fields = [
        { name : 'resourceIds', persist : true }
    ];
}

//region Data

const
    resources   = 
        { id : 'r1', name : 'Celia', city : 'Barcelona' },
        { id : 'r2', name : 'Lee', city : 'London' },
        { id : 'r3', name : 'Macy', city : 'New York' },
        { id : 'r4', name : 'Madison', city : 'Barcelona' },
        { id : 'r5', name : 'Rob', city : 'Rome' },
        { id : 'r6', name : 'Dave', city : 'Barcelona' },
        { id : 'r7', name : 'Dan', city : 'London' },
        { id : 'r8', name : 'George', city : 'New York' },
        { id : 'r9', name : 'Gloria', city : 'Rome' },
        { id : 'r10', name : 'Henrik', city : 'London' }
    ],
    events      = [
        {
            id          : 1,
            startDate   : new Date(2017, 0, 1, 10),
            endDate     : new Date(2017, 0, 1, 12),
            name        : 'Multi assigned',
            iconCls     : 'b-fa b-fa-users',
            resourceIds : ['r1', 'r2', 'r8']
        },
        {
            id          : 2,
            startDate   : new Date(2017, 0, 1, 13),
            endDate     : new Date(2017, 0, 1, 15),
            name        : 'Single assigned',
            iconCls     : 'b-fa b-fa-user',
            eventColor  : 'indigo',
            resourceIds : ['r3']
        },
        {
            id          : 3,
            startDate   : new Date(2017, 0, 1, 8),
            endDate     : new Date(2017, 0, 1, 11),
            name        : 'Single assigned',
            iconCls     : 'b-fa b-fa-user',
            eventColor  : 'cyan',
            resourceIds : ['r4']
        },
        {
            id          : 4,
            startDate   : new Date(2017, 0, 1, 10),
            endDate     : new Date(2017, 0, 1, 13),
            name        : 'Single assigned',
            iconCls     : 'b-fa b-fa-user',
            eventColor  : 'blue',
            resourceIds : ['r5']
        },
        {
            id          : 5,
            startDate   : new Date(2017, 0, 1, 13),
            endDate     : new Date(2017, 0, 1, 15),
            name        : 'Single assigned',
            iconCls     : 'b-fa b-fa-user',
            eventColor  : 'violet',
            resourceIds : ['r6']
        }
    ];

//endregion

const scheduler = new Scheduler({
    appendTo : 'container',

startDate         : new Date(2017, 0, 1, 6),
endDate           : new Date(2017, 0, 1, 20),
viewPreset        : 'hourAndDay',
eventStyle        : 'border',
resourceImagePath : '../_shared/images/users/',
multiEventSelect  : true,

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 130 },
    { text : 'City', field : 'city', width : 90 }
],

features : {
    eventDragSelect : true
},

resources,
eventStore : {
    modelClass : CustomEventModel,
    data       : events
},
assignmentStore: new AssignmentStore({
listeners: {
  beforeAdd: (event) =>  {
    console.log("beforeAdd event:", 
         event.records[0].originalData.event); 
    return true
  }
}
})
});

2. Strange effects when copy/paste Scheduler-Events
Several pasting actions adds more than the desired events and suddenly pasting does not work anymore.

Problem 2.mov
(2.09 MiB) Downloaded 10 times

Reproduce:

  • Open Demo: https://bryntum.com/products/scheduler/examples/multiassign-resourceids/
  • Copy (command+c) the Event of 'Macy'
  • Paste (command+v) two times
    => The second paste adds two Events (expected only one), sometimes one of them disappears after a short moment (0.2 - 2s)
    => The console logs 'Duplicate assignment of event x to resource y'
  • Select (command+c) the Event of 'Dave'
  • Paste (command+v)
    => Nothing happens
    => The console logs 'Duplicate assignment of event x to resource y'

Thanks for your help and input!

Christian


Post by marcio »

Hey Christian,

Thanks for reaching out and for the detailed report and examples.

That indeed looks strange and I created a ticket to fix that https://github.com/bryntum/support/issues/9803.

Please watch the tickets to receive live updates.

Best regards,
Márcio


Post by christian spiller »

Thank you, Marcio


Post Reply