Our pure JavaScript Scheduler component


Post by bprescott_msd »

Is it possible to create a submenu inside of extraItems for an eventContextMenu? I am looking to do something similar as to when you right click on a scheduler left column header, and you get a menu that includes Multi sort, which cascades into another menu. I looked for examples and could not find any, and I also tried a few things that did not work.

Please advise. Thanks.

BP

Post by pmiklashevich »

Hello,

Please try this out:
    features : {
        eventContextMenu : {
            // Extra items for all events
            extraItems : [
                {
                    text   : 'Menu 1',
                    icon   : 'b-fa b-fa-plane',
                    onItem : ({ eventRecord }) => console.log('Click on Menu 1', eventRecord),
                    menu   : [{
                        text   : 'Menu 2',
                        icon   : 'b-fa b-fa-building',
                        onItem : ({ eventRecord }) => console.log('Click on Menu 1', eventRecord),
                        menu   : [{
                            text   : 'Menu 3',
                            icon   : 'b-fa b-fa-cloud',
                            onItem : ({ eventRecord }) => console.log('Click on Menu 3', eventRecord)
                        }]
                    }]
                }
            ]
        }
    },
Let me know how it works for you!

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by palani »

i am using scheduler pro calendar in salesforce, i have added submenu inside event menu,but it will triggered as i am expected. Please advise. Thanks.

JS code

eventMenu: {
    // Extra items for all events
    items: [{
        text: 'Menu 1',
        icon: 'b-fa b-fa-plane',
        onItem: ({
            eventRecord
        }) => console.log('Click on Menu 1', eventRecord),
        menu: [{
            text: 'Menu 2',
            icon: 'b-fa b-fa-building',
            onItem: ({
                eventRecord
            }) => console.log('Click on Menu 1',
                eventRecord),
            menu: [{
                text: 'Menu 3',
                icon: 'b-fa b-fa-cloud',
                onItem: ({
                    eventRecord
                }) => console.log(
                    'Click on Menu 3',
                    eventRecord)
            }]
        }]
    }],
    editEvent: false,
    deleteEvent: false
},
Last edited by palani on Wed Feb 24, 2021 12:27 pm, edited 1 time in total.

Post by mats »

i have added submenu inside event menu, but it will triggered as i am expected.

Please describe what happens, any screenshots? Error messages in console?


Post by palani »

I have added a submenu to the event menu, it will display the menu button on the event right-click, but when I click on menu (Menu 1) submenu will not displayed. and I did not receive any error message into the console.

Event right click action buttons screen shot:

menu.PNG
menu.PNG (4.29 KiB) Viewed 1057 times

JS:

eventMenu: {
    // Extra items for all events
    items: [{
        text: 'Menu 1',
        icon: 'b-fa b-fa-plane',
        onItem: ({
            eventRecord
        }) => console.log('Click on Menu 1', eventRecord),
        menu: [{
            text: 'Menu 2',
            icon: 'b-fa b-fa-building',
            onItem: ({
                eventRecord
            }) => console.log('Click on Menu 2',
                eventRecord),
            menu: [{
                text: 'Menu 3',
                icon: 'b-fa b-fa-cloud',
                onItem: ({
                    eventRecord
                }) => console.log(
                    'Click on Menu 3',
                    eventRecord)
            }]
        }]
    }],
    editEvent: false,
    deleteEvent: false
},

Post by Maxim Gorkovsky »

Are you wraping this config to features object? It should look like:

features : {
        eventMenu : {
            // Extra items for all events
            items       : [{
                text   : 'Menu 1',
                icon   : 'b-fa b-fa-plane',
                onItem : ({
                              eventRecord
                          }) => console.log('Click on Menu 1', eventRecord),
                menu   : [{
                    text   : 'Menu 2',
                    icon   : 'b-fa b-fa-building',
                    onItem : ({
                                  eventRecord
                              }) => console.log('Click on Menu 2',
                        eventRecord),
                    menu   : [{
                        text   : 'Menu 3',
                        icon   : 'b-fa b-fa-cloud',
                        onItem : ({
                                      eventRecord
                                  }) => console.log(
                            'Click on Menu 3',
                            eventRecord)
                    }]
                }]
            }],
            editEvent   : false,
            deleteEvent : false
        }
    },
}

I just checked this config and it works for me

pro.png
pro.png (67.11 KiB) Viewed 1031 times

Post by palani »

I have tried wrapping it in features object, but still not displaying the submenu in event menu. I am looking forward to your quick response.

Here is the code snippet:

features: {
    stripe: true,
    eventMenu: true,
    dependencies: true,
    dependencyEdit: {
        showLagField: false
    },
    timeRanges: true,
    eventDrag: {
        constrainDragToResource: false
    },
    eventMenu: {
        // Extra items for all events
        items: [{
            text: 'Menu 1',
            icon: 'b-fa b-fa-plane',
            onItem: ({
                eventRecord
            }) => console.log('Click on Menu 1', eventRecord),
            menu: [{
                text: 'Menu 2',
                icon: 'b-fa b-fa-building',
                onItem: ({
                    eventRecord
                }) => console.log('Click on Menu 2',
                    eventRecord),
                menu: [{
                    text: 'Menu 3',
                    icon: 'b-fa b-fa-cloud',
                    onItem: ({
                        eventRecord
                    }) => console.log(
                        'Click on Menu 3',
                        eventRecord)
                }]
            }]
        }],
        editEvent: false,
        deleteEvent: false
    },
}

Post by Maxim Gorkovsky »

I see you have two conflicting eventMenu configs there, try removing first one? Usually code quality tools can spot such issues.


Post by palani »

@Maxim Yes, I have removed one event menu on the feature object, but still I am facing same issue.

Code snippet:

features: {
    stripe: true,
    dependencies: true,
    dependencyEdit: {
        showLagField: false
    },
    timeRanges: true,
    eventDrag: {
        constrainDragToResource: false
    },
    eventMenu: {
        // Extra items for all events
        items: [{
            text: 'Menu 1',
            icon: 'b-fa b-fa-plane',
            onItem: ({
                eventRecord
            }) => console.log('Click on Menu 1', eventRecord),
            menu: [{
                text: 'Menu 2',
                icon: 'b-fa b-fa-building',
                onItem: ({
                    eventRecord
                }) => console.log('Click on Menu 2',
                    eventRecord),
                menu: [{
                    text: 'Menu 3',
                    icon: 'b-fa b-fa-cloud',
                    onItem: ({
                        eventRecord
                    }) => console.log(
                        'Click on Menu 3',
                        eventRecord)
                }]
            }]
        }],
        editEvent: false,
        deleteEvent: false
    },
}

Post by Maxim Gorkovsky »

Which Bryntum Scheduler Pro version do you use? Which salesforce API do you use?
Can you try running our LWC component (one from the demo) with modified features config to see if it works?

If not, can you provide us your LWC component code so we can try it in our org? You can remove everything unrelated to scheduler instantiation. Also, where do you use your LWC component? Lightning app, community page or smth else?


Post Reply