[REACT] Sort events in overflow popup

[vconstruct]

Hi Team

I am trying to sort events based on name in the overflow popup for day, week and Month view

Tried using EventSorter functions interDaySorterFn, defaultSorterFn to override the default sorting, but its not working.

  <BryntumCalendar
            autoCreate={false}
            dragFeature={false}
            listeners = {{
              beforeShowOverflowPopup(event:any) {
                EventSorter.defaultSorterFn= (event1,event2) => {
                      event1 = event1.eventRecord || event1;
                      event2 = event2.eventRecord || event2;
                      const {
                          name: name1
                        } = event1,
                        {
                          name: name2
                        } = event2;
          

                    if(name1 < name2){
                      return -1;
                  }else if(name1 > name2){
                      return 1;
                  }else{
                      return 0;
                  }
              }
          }
        }}
     
    />

[Animal]

The overflowPopup has a config for this: https://bryntum.com/products/calendar/docs/api/Calendar/widget/OverflowPopup#config-eventSorter

so maybe

modeDefaults : {
    overflowPopup : {
        eventSorter(e1, e2) {
            //however you want...
        }
    }
}
````

[Animal]

That will of course apply to all views. It sounds like you don't want it on YearView. You can of course configure each mode separately.

[vconstruct]

overflowPopup when used inside modeDefaults is throwing an error

Code used:

  <BryntumCalendar
            autoCreate={false}
            dragFeature={false}    

            modeDefaults = {{
                overflowPopup: {
                  eventSorter(event1:any, event2:any) {
                     //sort here
                     console.log(event1)
                     return 1
                    }
                }
            }}
       />

Error in console:

Uncaught RangeError: Maximum call stack size exceeded
at Map.delete (<anonymous>)
at Config.removeInitter (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)
at MonthView.set (calendar.module.js1)

[Animal]

There must be something else in your app. I cannot see the code that is being executed. It certainly works with just a Calendar and just Javascript:

Screenshot 2023-05-23 at 08.17.39.png (307.96 KiB) Viewed 435 times

[Animal]

I assume that error is when you click the +n more button.

So when you set a breakpoint at line 2011 just before you click that button? What property is being set, by whom?

[vconstruct]

Yes, the error occurs on +n more button click

Added a breakpoint at line 2011, the value is undefined.

[Animal]

OK, but what property name is it setting? And when you step in and investigate, what happens?

[vconstruct]

The property name is 'overflowPopup' but when the error occured the property name is empty string

The value is event sorter function that we provided through props

The error is occuring at line 2034 at 'lazyValues.delete'

LazyValues object :

download/file.php?mode=view&id=22512&sid=438ec23789789813e2f9ba250fc770ad

[Animal]

I updated the react "Basic" app like this:

Screenshot 2023-05-25 at 10.50.14.png (174.26 KiB) Viewed 377 times

And it works with no errors. As I said, there must be something else in your code that we are not being shown.