Bryntum Support Forums

Posted: **Thu Mar 09, 2023 10:46 pm**

Hello,

I'm seeing that in certain event configurations in month view I'll see cells with an overflow popup despite the day being not full or empty. I have attached a codepen with an example here: https://codepen.io/connor-veeva/pen/qBMVMbG?editors=0010 although I understand that time zone may play a role (I'm EST) so I've also attached a screenshot as well.

I was wondering if this was expected behavior and/or if you have any suggestions for me.

Thanks!
Connor

Posted: **Fri Mar 10, 2023 12:10 am**

Hey Connor,

I believe that's not the expected behavior, I created a ticket to check that and change if needed - https://github.com/bryntum/support/issues/6337

Posted: **Fri Mar 10, 2023 8:47 am**

Can you please send us the data set which produces this?

This indicates that prior cells have long running events "Test 1" and "Test 6" at slot 4 and below. Do those events in fact start on the 31st and show when the "+2 more" of the 31st is shown?

Because long running events should sort to the top of the event slots. Do you have a custom eventSorter for your month mode??

Posted: **Fri Mar 10, 2023 5:53 pm**

Sure! I have the following events in the screenshot:

    {
        "id": "001",
        "name": "test 1",
        "startDate": "2023-03-31T05:30:00.000Z",
        "duration": 60*24*4,
        "durationUnit": "m",
        "color" : "blue"
    },
    {
        "id": "002",
        "name": "test 2",
        "startDate": "2023-03-31T05:00:00.000Z",
        "duration": 300,
        "allDay": true,
        "durationUnit": "m",
        "color" : "red"
    },
    {
        "id": "003",
        "name": "test 3",
        "startDate": "2023-03-31T07:00:00.000Z",
        "duration": 300,
        "allDay": true,
        "durationUnit": "m",
        "color" : "orange"
    },
    {
        "id": "004",
        "name": "test 4",
        "startDate": "2023-03-31T06:00:00.000Z",
        "duration": 300,
        "allDay": true,
        "durationUnit": "m",
        "color" : "purple"
    },
    {
        "id": "006",
        "name": "test 6",
        "startDate": "2023-03-31T06:00:00.000Z",
        "duration": 60 * 24,
        "durationUnit": "m"
    }

I don't have a custom eventSorter and yes those events do start on the 31st and the overflow popover will display them correctly. It seems that the issue is that allDay events will be placed before multi-day events that are not allDay.

I'm guessing by your comment though that I may be able to handle this by utilizing a custom eventSorter so I'll look there in the meantime.

Posted: **Mon Mar 13, 2023 4:14 pm**

I think we have the sorting wrong.

Earlier starting events go first in the cell. So those three "all day" events start at 00:00

But the long running events start at 7:30 and 8:00 so sort to the end.

I think longer events should sort to the top.

This is what I see currently which shows what you found. Those long running events sorted to the bottom of the first cell.

: Screenshot 2023-03-13 at 15.15.11.png (92.24 KiB) Viewed 323 times

Posted: **Mon Mar 13, 2023 4:17 pm**

Here's the ticket: https://github.com/bryntum/support/issues/6368

Posted: **Mon Mar 13, 2023 4:48 pm**

This:

function (event1, event2) {
        // Handle event wrapping which is what MonthView does.
        event1 = event1.eventRecord || event1;
        event2 = event2.eventRecord || event2;

        const
            {
                startDate  : start1,
                isInterDay : event1InterDay
            } = event1,
            {
                startDate  : start2,
                isInterDay : event2InterDay
            } = event2;

        // Unscheduled events sort to the top.
        if (!start1) {
            return -1;
        }
        if (!start2) {
            return 1;
        }

        // InterDay events sort to the top (https://github.com/bryntum/support/issues/1693).
        if (event1InterDay !== event2InterDay) {
            return Number(event2InterDay) - Number(event1InterDay);
        }

        // Sort Duration (longest first), then by ending date (furthest in future first), then by start timestamp.
        // This is *in-cell* sorting.
        return event2.durationMS - event1.durationMS || event2.endingDate - event1.endingDate || start1 - start2;
    }

Gives this result for your data:

: Screenshot 2023-03-13 at 15.48.10.png (59.95 KiB) Viewed 319 times

Bryntum Support Forums

overflow popup showing for empty day

overflow popup showing for empty day

Re: overflow popup showing for empty day

Re: overflow popup showing for empty day

Re: overflow popup showing for empty day

Re: overflow popup showing for empty day

Re: overflow popup showing for empty day

Re: overflow popup showing for empty day