[REACT] Modify single occurrence of recurrent event

[saramh]

Hello Bryntum team,

I'm looking at the documentation for recurrent events. I see that an exception structure is defined here https://www.bryntum.com/products/calendar/docs/api/Scheduler/model/mixin/RecurringTimeSpan#function-addExceptionDate.

In case I'd like to modify a field of the event (the description for example) of a single occurrence, how could I do it? Is this currently supported?

Thanks a lot!

[tasnim]

Hi,

Thanks for reaching out.

Could you please explain a bit further about your use-case? which field you want to modify and how? Maybe by showing a screen-shot

Best regards,
Tasnim

[Animal]

Normally this is done by the EventEdit feature when you edit an occurrence, and then choose the "Only this event" button:

Screenshot 2024-06-11 at 06.59.54.png (125.41 KiB) Viewed 424 times

But if you want to do it programatically, get the base event definition and just call that method and pass a date. The occurrence on that date will disappear before your very eyes:

Screenshot 2024-06-11 at 07.02.48.png (250.02 KiB) Viewed 424 times

Then just add a new event in its place with the new details.

[saramh]

Thanks for your response Animal.
If I understand this correctly you will be deleting the event from the series and then creating a new one? This is a different behaviour than desired.
Is there a way to programmatically edit the occurrence? Something like this:

addException({date: "25-01-2025", description: "Different than the series" })

Thank you

[Animal]

You could add that method yourself.

class MyEvent extends EventModel {
    addException(date, changes) {
        // Create a clone of the base definition
        const replacement = (this.recurringEvent || this).copy();

        // Apply the changes to the clone
        replacement.set({ startDate: date, …changes });

        // Add the exception event with its changes for that date
        this.eventStore.add(replacement);

        // Knock out the occurrence at that date
        this.addExceptionDate(date);
    }
}

...

new Calendar({
    // Configure the Project's event store to use our more capable Event class
    project : {
        eventStore : {
            modelClass : MyEvent
        }
    }
    ...
});

This is off the top of my head code, so YMMV, but I'm sure you can get it working.