Our powerful JS Calendar component


Post by 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; } } } }} />

Post by 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...
        }
    }
}
````

Post by 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.


Post by 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.js:2034:1)
at MonthView.set (calendar.module.js:2009:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)
at MonthView.set (calendar.module.js:2011:1)


Post by 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
Screenshot 2023-05-23 at 08.17.39.png (307.96 KiB) Viewed 333 times

Post by 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?


Post by vconstruct »

Yes, the error occurs on +n more button click

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

Attachments
calendar1.PNG
calendar1.PNG (48.9 KiB) Viewed 319 times

Post by Animal »

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


Post by 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

Attachments
calendar3.PNG
calendar3.PNG (8.18 KiB) Viewed 299 times
calendar2.PNG
calendar2.PNG (40.8 KiB) Viewed 299 times

Post by Animal »

I updated the react "Basic" app like this:

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

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


Post Reply