[REACT] Changing eventRenderer at runtime

[alexskv4]

Hello. I am trying to make the events in my calendar user configurable, and would like to change the eventRenderer configuration of the calendar at runtime. I have tried to do it as below, and then refresh the calendar, but this does not work.

Object.assign(calendar.config.modes.weekResources.view, 
        {eventRenderer: ({ eventRecord }: { eventRecord: EventModel }) => {
            return renderToStaticMarkup(
              <MyCustomEvent eventRecord={eventRecord} />
            )
          }
        }
        )
        calendar.refresh()
        

Is there any way to change the eventRenderer config, and refresh all events according to the new eventRenderer?

[Animal]

Yes. calendar.config?

Why are you changing the object which was used way back when the calendar was created?

You need to change the live views. Multiple. All the views of the view that you are targeting.

But really, it would be best to just have a fixed renderer which itself knows how to change depending on your app's conditions.

[alexskv4]

Ideally yes, a renderer that can itself change based on app conditions would be ideal. However, Calendar doesn't seem to support JSX elements for it's eventRenderer, so I have to use React's renderToStaticMarkup, which is quite limiting.

How would I go about accessing and changing the actual renderer on the views themselves from the calendar instance?

If I were to do it the way I am currently trying, by altering the config object and attempting to get the calendar to "apply" the new config, how could I make the calendar refresh itself and apply the config? Is there a way to "reload" the calendar with a new config?

[Animal]

JSX? What are you wanting your events to contain? Surely they are small blocks of HTML and you'd just add some small HTML string? You wouldn't want some heavy third party framework code getting involved?

[alexskv4]

This is a bit of a can of worms, and yes, the custom event renderer is rather complicated.

Each event is physically large, and within it contains different elements, and I am displaying tooltips with different information depending on which sub-element is hovered. I have this working successfully.

The problem I am running into is that I am attempting to create a user settings page where one can customize the layout of their tooltips. I have this almost fully working, and the settings are applied correctly on the first load (when calendar is created), but when attempting to change the layout of the tooltips after the first loading of the calendar, I am unable to get the calendar to use my new and slightly updated event renderer.

In short, it is necessary for the eventRenderer to be a JSX element, and not just simple HTML, and I need to dynamically slightly change this eventRenderer based on other application events.

[Animal]

Then just physically inject a renderer into the views.

[Animal]

Screenshot 2023-12-28 at 08.40.07.png (472.67 KiB) Viewed 888 times

[Animal]

The explicit refresh call should not really be needed: https://github.com/bryntum/support/issues/8140

[alexskv4]

Okay, changing the eventRenderer on the activeView was successful and works as I expect. Your screenshot was very helpful.
The refresh call was indeed not needed and my code works without it.

Thank you.

[Animal]

The refresh call was indeed not needed and my code works without it.

That's worrying. When you set the renderer to function() { debugger; }, and it just stops there immediately, how does it get there? It should not. This indicates that something bad is happening.