[REACT] Calendar - agenda mode, how to list past events in reverse order

[clovisapp]

Hi Bryntum team,

Inside Bryntum calendar in "agenda" mode, when going in the "past" week or days with the arrows, is there a way to detect that it's in the past, and to list events in a reverse order ? = sorting the events in descending order ?
By default the events are sorted by date in ascending order, but when going in the past, it can create some UX confusing, the best is to have them in descending order.

Thanks a lot for your help !

[Animal]

You could configure in an event sorter: https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-eventSorter

[Animal]

In a sorter, you don't see the date of the particular cell for which you are sorting the events. We should fix that.

In the meantime, you can use the dayCellpopulated event to sort the events in a cell:

        agenda : {
            listeners : {
                dayCellPopulated({ date, events }) {
                    // Sort "events" using your sort logic
                }
            }
        }

[clovisapp]

Thanks a lot @Animal, can you write the full code example with "dayCellPopulated" ?

How does it work, with a "return" ?

[Animal]

Just mutate the events array.

[clovisapp]

@Animal, please can you give full examples at some point ?

there's many way to mute an array

[Animal]

Well you want to sort it don’t you?

events.sort(yourSortFn)

[clovisapp]

Hi @Animal ,

I hope you're well, I made this change, but I don't see any changes in the Agenda Calendar , let me share the code

    modes: {
      agenda: {
        Column: {
          autoWidth: true,
          fitMode: "textContent",
        },
        listeners: {
          dayCellPopulated({
            date,
            events,
          }: {
            date: Date;
            events: EventModel[];
          }) {
            // Sort "events"
            console.log("before:", date, events);
            events.sort(
              (a: EventModel, b: EventModel) =>
                new Date(a.startDate).getTime() -
                new Date(b.startDate).getTime()
            );
          },
          refresh: (event: { source: { eventCount: number } }) => {
            if (AgendaContainerRef.current) {
              if (event?.source?.eventCount === 0) {
                AgendaContainerRef.current.style.height = "150px";
              } else {
                /* Quick maths bases on rows height to display the calendar function of events number */
                AgendaContainerRef.current.style.height = `${
                  162 + 86 * (event?.source?.eventCount - 1)
                }px`;
              }
            }
          },
        },
        /* Bryntum: Add range for rendering the calendar in the current day, https://forum.bryntum.com/viewtopic.php?t=27594 */
        range: "365 d",
        syncViewDate: false,
      },
      day: null,
      month: null,
      week: null,
      year: null,
    },

calendar

Captura de pantalla 2024-02-26 a la(s) 7.31.40 p. m..png (310.9 KiB) Viewed 350 times

Our goal is to "reverse" the data, can you help me, please?

[marcio]

Hey clovisapp,

I tried on our basic demo https://bryntum.com/products/calendar/examples/basic/ the following snippet (just inverted the order of the sort)

modes: {
	agenda : {
		listeners : {
			dayCellPopulated({ date, events }) {
				events.sort(
					(a, b) =>
						new Date(b.startDate).getTime() -
						new Date(a.startDate).getTime()
				);
			}
		}
	}
}

And got the dates inverted, like the screenshot that I'm sharing.

[clovisapp]

Hi Marcio,

Sorry that was my mistake, when I said that I wanted to show the data in reverse order, I was referring to the days, for example, if at the top of the agenda I have Sunday the 11th, the next days that we want to show are 10, 09, 08, 07, 06 and so on.

11
10
09
08
07
....