[REACT] Calendar Agenda mode change event

[romandatsiuk]

Hi,
Is there an event listener for click at Agenda modes?
I need to call some method on click.

Thanks

Screenshot 2024-01-25 at 20.12.14.png (143.97 KiB) Viewed 1027 times

[Animal]

That menu is this: https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#property-listRangeMenu

You can add event listeners.

But what is the underlying app requirement?

To change some UI when the view loads new data?

[Animal]

This event might be interesting: https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#event-cellMapPopulated

Or this: https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#event-rangeChange

[romandatsiuk]

I tried a few events and those did not work for me. Could you please point me to an event that I can use? For example, onActiveItemChange is not working for Agenda mode and onDateRangeChange does no have a new value.

We need it to save/restore the default Agenda mode remotely.

We use Calendar property modeDefaults

modeDefaults={{ range: activeCalendarAgendaMode }}

to load active view on load. We need an event where we can send HTTP request to save a new default value.

[Animal]

The events certainly work.

In what manner did you add listeners?

[romandatsiuk]

Yes, events are working. I meant that there is no needed data. I need a new mode name, so I can save it to use as a default on the next load.

This is my Calendar component

Screenshot 2024-01-25 at 21.32.40.png (187.42 KiB) Viewed 1010 times

There is onDateRangeChange event that fires when I click Decade, Year or any other Agenda mode

[Animal]

See this codepen: https://codepen.io/Animal-Nige/pen/ZEPXgoM?editors=0010

Screenshot 2024-01-25 at 20.59.32.png (250.08 KiB) Viewed 1003 times

I cannot parse this: "I need a new mode name, so I can save it to use as a default on the next load."

[Animal]

Agenda has no "mode". AgendaView is nothing but a Grid with a single column and an extremely fancy cell renderer.

Agenda just has a range: https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#property-range

From the codepen:

Screenshot 2024-01-25 at 21.05.39.png (274.32 KiB) Viewed 1003 times

[Animal]

I updated the codepen to show it:

Screenshot 2024-01-25 at 21.10.20.png (190.18 KiB) Viewed 1001 times

[romandatsiuk]

Thanks a lot, that's what I need