"X More" dialog does not sort items based on the timestamp

Version

2.1.3

Test Environment

Chrome

Current Behavior

Our users are active calendar users and they have a very busy calendar. X More dialog does not sort the events and it drives them absolutely insane. Here is an example:

I hope it is a simple fix somewhere in here:

tui.calendar/apps/calendar/src/components/popup/seeMoreEventsPopup.tsx

Line 87 in b53e765

{events.map((uiModel) => (

Expected Behavior

The events sorted by time just like in the main view.

I managed to develop the following solution without the need to change the plugin's source code

Solution

cal.on({'clickMoreEventsBtn': function(day) {

    // Variable to store the events for the selected day
    const allSchedules = [];

    // Loop through the div to capture all events and store them in the allSchedules array
    day.target.querySelectorAll('.toastui-calendar-weekday-event-block').forEach(function(htmlEvent) {

        var eventId = parseInt(htmlEvent.getAttribute('data-event-id'));
        var calendarId = parseInt(htmlEvent.getAttribute('data-calendar-id'));
        
        // ADD THE EVENT AND ITS HTML TO THE ARRAY
        allSchedules.push({'event' : cal.getEvent(eventId, calendarId), 'html' : htmlEvent});
    });

    // Sort the events by start time
    allSchedules.sort((a, b) => {
        const timeA = new Date(a.event.start).getTime();
        const timeB = new Date(b.event.start).getTime();
        return timeA - timeB;
    });

    // Customize the popup with the sorted events (Replace the existing content)
    const popupContent = day.target.querySelector('.toastui-calendar-month-more-list');

    if (popupContent) {
        // Clear the existing content
        popupContent.innerHTML = '';

        // Add the sorted events
        allSchedules.forEach(schedule => {
            popupContent.appendChild(schedule.html);
        });
    }

}});

Explanation:

1. Storing Events: We use a variable allSchedules to keep track of all the events for the selected day.
3. Getting Events: We loop through the HTML of the popup to capture each displayed event. By extracting the event ID and calendar ID from the HTML, we can access the event data using the getEvent function. Both the event data and its HTML are stored in the allSchedules array.
4. Sorting: We sort the events based on their start time.
5. Updating the Popup: After retrieving and sorting the events, we update the popup content with the sorted events.