[REACT] RecurringConfirmationDialog events

[alexandre.serres]

Hello,

We are currently using Calendar component and we have interrogation on how to catch the differents events when we click on buttons from this pop-up

deletePopup.png (20.88 KiB) Viewed 265 times

When we check for documentation, we don't find anything on the usage of this pop-up

Regards, Alexandre

[marcio]

Hey Alexandre,

You can check the button events like this

recurrenceConfirmationPopup : {
        bbar : {
            items : {
                changeSingleButton : {
                    onAction : (ev) => {
                        console.log('clicked change single button');
                    }
                },
                changeMultipleButton : {
                    onAction : (ev) => {
                        console.log('clicked change multiple button');
                    }
                },
                cancelButton : {
                    onAction : (ev) => {
                        console.log('clicked change cancel button');
                    }
                }
            }
        }
    }

[alexandre.serres]

Hello thanks for return Marcio,

Just to be sure where you add this part of code?
The code is going inside the global configuration of BryntumCalendar or we have to put it on different places?

<BryntumCalendar
                ref = {calendarRef}
                {...calendarConfig}
/>

Regards, Alexandre

[Animal]

Inside the configuration block for the eventEdit feature, create a recurrenceConfirmation property:

recurrenceConfirmation : {
    bbar : {
        items : {
            changeSingleButton : {
                onAction : (ev) => {
                    console.log('clicked change single button');
                }
            },
            changeMultipleButton : {
                onAction : (ev) => {
                    console.log('clicked change multiple button');
                }
            },
            cancelButton : {
                onAction : (ev) => {
                    console.log('clicked change cancel button');
                }
            }
        }
    }
}

[Animal]

Very interested to know what the use case is here so that when I improve the documentation I can add some example code.

Because I cannot think of a single use case. The buttons just do what they do.

What do you want to happen when they click these buttons?

[alexandre.serres]

We use the latest version of code (5.6.0), we add the property recurrenceConfirmation (we test also recurrenceConfirmationPopup) as you said on eventEdit but there is no console.log display whatever the button we click on.

We want to have an control of the button to do distinction between an delete on an single event or an recurring event.
Behind in our database, we have to take this into account because if it's recurring that mean we have to play with property exceptionDates and also on the update when we change an recurring, we have 2 operations to perform, add exception on the recurring and store an new event.

We tried to use onBeforeEventDelete on CalendarConfig level but the event is match only when we click on Delette button then the popup is open.

Here our config for testing the code you sent.

{
        features: {
            drag: {
                draggable: false,
                resizable: false,
                validateMoveFn: handleDrag,
                creatable: false,
            },
            eventEdit: eventEdit(resourceStore, activity, userLogin), // custo eventEdit
            eventTooltip: {
                recurrenceConfirmation: {
                    bbar: {
                        items: {
                            changeSingleButton: {
                                onAction: (ev) => {
                                    console.log('clicked change single button');
                                },
                            },
                            changeMultipleButton: {
                                onAction: (ev) => {
                                    console.log(
                                        'clicked change multiple button',
                                    );
                                },
                            },
                            cancelButton: {
                                onAction: (ev) => {
                                    console.log('clicked change cancel button');
                                },
                            },
                        },
                    },
                },
            },
        },
        onBeforeEventSave: async (event: any) => await handleSave(event),
        onBeforeEventDelete: async (event: any) =>
            await handleDelete(event, userLogin),

    },
};

[Animal]

We want to have an control of the button to do distinction between an delete on an single event or an recurring event.

This popup only shows when you are modifying a recurring event.

we have to take this into account because if it's recurring that mean we have to play with property exceptionDates and also on the update when we change an recurring, we have 2 operations to perform, add exception on the recurring

That is the very purpose of this Popup. We handle this. As you would expect from a software package. If you modify an occurrence of a recurring event it adds a date to the exceptions on the base event:

Screenshot 2023-11-15 at 15.47.53.png (99.85 KiB) Viewed 195 times

[Animal]

Same happens when you delete an event:

Screenshot 2023-11-15 at 15.56.30.png (131.3 KiB) Viewed 195 times

[Animal]

You really want to somehow reconfigure the eventTooltip feature for some purpose? Can you explain what you wish to do with the eventTooltip feature?

[alexandre.serres]

Sorry, I did an very bad copy/paste and we put the recurrenceConfirmation on eventEdit inside features and not eventTooltip.

Let's just take the deletion use case, I just want to know easily (with an event for example) that my user pickup this recurrent event and he justs click on "Delete only this events" (or the others).
And behind on my backend procedure, I want to send finally the information about my recurring event using id and at last the exceptionDate value to be able to store it in database and then when I will reload my page, I will see that one event disappear.

For edit use case, it's quite similar except that I have to add also in recurring event the exceptionDate + I need to create an new Event with the related information.

We already overloaded the event onBeforeEventSave to call our backend and proceed to the saving in live mode.
Finally we want to do the same for RecurringConfirmationPopup but we are not able to do it.