[REACT] Custom RecurrenceConfirmationPopup

[aaronuntether]

I've created a custom RecurrenceConfirmationPopup component that shows up when editing a recurring event on drag/resize. Right now, when I select an option from the popup, the event doesn't get updated on the Calendar UI. How do I get the event to update on the calendar UI after the user selects an option: 'this', 'this and following' or 'all'?

 const beforeDragResizeEnd = async ({
        eventRecord: record,
        newStartDate,
        newEndDate,
        source,
    }: {
        eventRecord: AvailabilityEventModel;
        newStartDate: Date;
        newEndDate: Date;
        source: Calendar;
    }) => {
    	// handles showing the popup and updating the db
        const res = await handleUpdateEvent(record, newStartDate, newEndDate, source);
        return false;
    };

[Animal]

It's all a complicated data operation which we do for you in the RecurrenceConfirmationPopup. Is there any reason why you don't allow that to happen?

Screenshot 2024-07-30 at 18.26.47.png (212.98 KiB) Viewed 224 times

[aaronuntether]

If I use the the recurringConfirmationPopup provided, where do I update my database when the recurring event gets updated?

I see. Mostly because we would like to have our own styling for the RecurringConfirmationPopup. For example, using a radio for the options instead of buttons etc.

I've tried setting the fields for the record to trigger an update on the Calendar UI and that seems to work for the 'this and following' cases and not others.

 const beforeDragResizeEnd = async ({
        eventRecord: record,
        newStartDate,
        newEndDate,
        source,
    }: {
        eventRecord: AvailabilityEventModel;
        newStartDate: Date;
        newEndDate: Date;
        source: Calendar;
    }) => {
            record.set('startDate', dayjs(newStartDate).toDate());
            record.set('endDate', dayjs(newEndDate).toDate());
            const res = await handleUpdateEvent(record, newStartDate, newEndDate, source);
            return false;

[Animal]

Because there's a lot more to it.

Think about it. You change one occurrence. It's not a "real" record in the database. An occurrence is an ephemeral event just inserted into the UI

Changing that record won't do anything.

You have to to actually create a new non recurring event at that date to make that a real event.

Then you have to add an exceptionDate to the base definition.

And this has to happen however an occurrence changes. So drag resize, drag move, edit, programmatic change. It routes through the same code.

So for styling, you can of course style the widgets using CSS as you see fit.

Making the UI use checkboxes might be a Feature Request, though might be possible using CSS .

[aaronuntether]

I understand the complexity around handling the update 'this' event case.

Is it possible to create a new event and update the base recurring event from the beforeDragResizeEnd handler?

Maybe something like this to create a new event?

const beforeDragMoveEnd = async ({
        eventRecord: record,
        newStartDate,
        newEndDate,
        source,
    }: {
        eventRecord: AvailabilityEventModel;
        newStartDate: Date;
        newEndDate: Date;
        source: Calendar;
    }) => {
    	// create new record for the exception in the recurring event
    	const realRecord = record.copy();
        source.eventStore.add(realRecord);
        return false;
   }

[Animal]

Yes, you can do it from there. If you return false, the operation won't be completed, and your code can do what it wants.

Don't forget that you'll have to add an exceptionDate to the base definition.

So if it's an occurrence (https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#property-isOccurrence), then add a clone, and add an exception to it owning base definition (https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#property-recurringTimeSpan)

https://bryntum.com/products/scheduler/docs/api/Scheduler/model/mixin/RecurringTimeSpan#function-addExceptionDate

If it's not an occurrence, the user has modified the base, so they probably mean change the whole series? Unless it's dragged to another date? So what to do then is up to you.