Our pure JavaScript Scheduler component


Post by lda »

Hi,

I'm using SchedulerPro. I was trying to create an option in my "eventMenu" to change an event property from true to false and vice versa so I did this:

eventMenu: {
    items: {
        lockEvent: {
            text: "Lock",
            icon: "b-fa b-fa-fw b-fa-lock",
            weight: 400,
            onItem : ({ eventRecord }) => {
                eventRecord.data.locked = true;
                eventRecord.iconCls = 'b-fa b-fa-fw b-fa-lock'; 
            }
        }, 
        unlockEvent: {
            text: "Unlock",
            icon: "b-fa b-fa-fw b-fa-lock-open",
            weight: 400,
            onItem : ({ eventRecord }) => {
                eventRecord.data.locked = false;
                eventRecord.iconCls = ''; 
            }
        },    
    },

    processItems({ items, eventRecord }){
        if(eventRecord.data.locked){
            items.lockEvent.hidden = true,
            items.unlockEvent.hidden = false
        }
        else {
            items.lockEvent.hidden = false,
            items.unlockEvent.hidden = true
        }
    },
}

The transition from true to false works properly, but the transition from false to true isn't: the action must be repeated twice in order for it to work because after the first false->true transition the value is set back to false after the onItem function completion.

I found this workaround:

lockEvent: {
    text: "Lock",
    icon: "b-fa b-fa-fw b-fa-lock",
    weight: 400,
    onItem : ({ eventRecord }) => {
        eventRecord.data.locked = true;
        eventRecord.iconCls = 'b-fa b-fa-fw b-fa-lock'; 
        
        window.setTimeout(() =>{
            console.log(eventRecord.data.locked)
            eventRecord.data.locked = true;
        }, 100) //setting the timeout to 0 didn't work
    }
}, 

The problem seems to lie in something that happens after the commit because:

  1. I noticed that the problem vanishes if autoCommit and autoSync are disabled
  2. Moreover, maintaining autoCommit and autoSync to false, I tried manually calling the commit function in my code and observed that property value changes some time after the end of the call.

I attached a project sample. To reproduce the problem you need to load/commit the data from a server.

Attachments
sample.zip
(1.41 MiB) Downloaded 20 times

Post by marcio »

Hey lda,

You shouldn't use eventRecord.data to get or set the value of an EventModel, it's an internal property, as you won't see the data property available in the documentation https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/EventModel

To handle that properly, you should use https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/EventModel#function-get and https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/EventModel#function-set, to avoid that async problem.

Best regards,
Márcio


Post by lda »

Hi marcio,

thanks for the replay. I'm now using the get and set functions to handle the data properly, anyway they didn't solve the problem.

I attached a sample with the new code.

Attachments
sample.zip
(1.42 MiB) Downloaded 12 times

Post by marcio »

Hey,

Checking your demo, you're setting the locked to a string true/false instead of a boolean, then the if is gonna be always true. Changing

 lockEvent   : {
                        text   : 'Lock',
                        icon   : 'b-fa b-fa-fw b-fa-lock',
                        weight : 400,
                        onItem : ({ eventRecord }) => {
                            eventRecord.set('locked', 'true');
                            eventRecord.iconCls = 'b-fa b-fa-fw b-fa-lock';
                            // eventRecord.setAsync('locked', 'true').then(() => {
                            //     eventRecord.iconCls = "b-fa b-fa-fw b-fa-lock"; 
                            // });
                        }
                    },
                    unlockEvent : {
                        text   : 'Unlock',
                        icon   : 'b-fa b-fa-fw b-fa-lock-open',
                        weight : 400,
                        onItem : ({ eventRecord }) => {
                            eventRecord.set('locked', 'false');
                            eventRecord.iconCls = '';
                            // eventRecord.setAsync('locked', 'false').then(() => {
                            //     eventRecord.iconCls = ''; 
                            // });
                        }
                    }

To this

 lockEvent   : {
                        text   : 'Lock',
                        icon   : 'b-fa b-fa-fw b-fa-lock',
                        weight : 400,
                        onItem : ({ eventRecord }) => {
                            eventRecord.set('locked', true);
                            eventRecord.iconCls = 'b-fa b-fa-fw b-fa-lock';
                            // eventRecord.setAsync('locked', 'true').then(() => {
                            //     eventRecord.iconCls = "b-fa b-fa-fw b-fa-lock"; 
                            // });
                        }
                    },
                    unlockEvent : {
                        text   : 'Unlock',
                        icon   : 'b-fa b-fa-fw b-fa-lock-open',
                        weight : 400,
                        onItem : ({ eventRecord }) => {
                            eventRecord.set('locked', false);
                            eventRecord.iconCls = '';
                            // eventRecord.setAsync('locked', 'false').then(() => {
                            //     eventRecord.iconCls = ''; 
                            // });
                        }
                    }

Did the trick for me, as you'll see in the video attached.

Attachments
sample_project - 26 January 2023.mp4
(246.26 KiB) Downloaded 16 times

Best regards,
Márcio


Post by lda »

Hi Marcio,

thanks that did the trick for me as well!


Post Reply