Dont edit history - make previous events read only?

[dansmithcreates]

Hopefully a simple question...

How to prevent editing of events before today? and earlier today? (now....)

This includes not being able to drag start/end times

This includes not being able to edit previous events in a recurring series, but still being able to edit future events in a recurring series

In other words, how to freeze the history of previous events?

I suppose an additional wrinkle is that you want to be able to view the info of a previous event (readonly event editor? tooltip?), but not change anything

I would think this is a common requirement, etc. Is there a variable for this?

[Animal]

You could set the readOnly property on events. The server should set this ideally.

[Animal]

There’s also the https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#event-beforeEventEdit event.

[dansmithcreates]

You could set the readOnly property on events. The server should set this ideally.

On the server side? that falls apart for recurring events.
example: a recurring event that started January 2nd, and which recurs weekly on Thursday. The 2nd, 9th, and 16th are in the past, but the next one, on the 23rd, is tomorrow.

ideally, one would want something in the loading or event rendering phase that would tag the "before now" events as readOnly.

it sounds like this has to be done manually... checking before anything that could possibly edit or delete.

I would think this is a common use case, where record keeping is important.

[Animal]

Yes. Checking. How else could it be done? I’m open to ideas.

[dansmithcreates]

Yes. Checking. How else could it be done? I’m open to ideas.

historyIsReadOnly: true

some new global flag, set events to readOnly when loading or rendering, if they are before "now". I imagine there is some point in the load / render pipeline where this makes sense (after you expand RRules). If you already calculate an integer timestamp somewhere, that makes for an easy compare of eventEndsTimeStamp < nowTimeStamp

of course, that gets weird if the user walks away from their session for 4 hours.. but that's an edge case.

the alternative is trying to think of all of the onBefore* user side code and doing the right thing there.

[Animal]

Here is how to do it: https://codepen.io/Animal-Nige/pen/NPKOMGN?editors=0010

[dansmithcreates]

aha! that's pretty good. Thanks, Animal
I relaxed it by one day, just so that it's harder to accidentally create something that would be hard to remove:

    let now = new Date();
    now.setDate(now.getDate() - 1);
    eventRecord.setData("readOnly", eventRecord.endDate < now);

I also like the shading change for the past events.

[Animal]

It's readOnly events that get that greyed out effect that you re seeing.

There are no special CSS rules for past events. They do get the class b-past-event added if you want to add some styling to past events.

I updated the example. You probably also want this listener on the Calendar:

        // No drag-creating in the past
        beforeDragCreate({ date }) {
            if (date < new Date()) {
                return false;
            }
        }

[dansmithcreates]

yep, I like the visual of past events. thanks!