Our powerful JS Calendar component


Post by conn.finn »

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

Attachments
Screen Shot 2023-03-09 at 3.43.21 PM.png
Screen Shot 2023-03-09 at 3.43.21 PM.png (96.61 KiB) Viewed 254 times

Post by marcio »

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

Best regards,
Márcio


Post by Animal »

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


Post by conn.finn »

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.


Post by Animal »

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
Screenshot 2023-03-13 at 15.15.11.png (92.24 KiB) Viewed 179 times

Post by Animal »


Post by Animal »

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
Screenshot 2023-03-13 at 15.48.10.png (59.95 KiB) Viewed 175 times

Post Reply