How can I reorder past events to be chronologically in order instead of showing the most recent dates first?

Ask the Community General Questions
1

  • Issue description: I want the events to appear chronologically, not the most recent events first. Example, November 11th at 9am, 9:15am, 9:45am, etc. should come first before November 12th at 8:25am, 8:30am, 9am, etc. I’m unable to drag the events around and reorder them myself. Please help!

  • Link to the page with the widget in question: https://www.topshopsevent.com/agenda

2

Hi @user28357, welcome to the Community :waving_hand:

I’m happy to help you with that. I’ll go ahead and ask our devs to prepare a custom script for your request – will report back to you soon!

Stay tuned :eyes:

4

Hello there,

The devs provided a custom script for your case :tada:
Here it is:

const pastEventsListSelector = '.eapp-events-calendar-layout-past-events .eapp-events-calendar-list-events';
const pastEventItemSelector = '.eapp-events-calendar-list-item-component';

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

const resortPastEvents = async () => {
  const pastEventsList = await waitForElement(pastEventsListSelector);

  const items = Array.from(pastEventsList.querySelectorAll(pastEventItemSelector));

  const reversed = items.reverse();

  pastEventsList.innerHTML = '';

  reversed.forEach(item => pastEventsList.appendChild(item));
};

resortPastEvents();

It will reverse the Past Events list, so that the event furthest in the past shows up at the top.

I already pasted the script into the Custom JS section of your Event Calendar, and you can see the changes on your website. Please note that the reordered list won’t be visible in the widget editor, but only on the live site.

Let me know if it helped :slightly_smiling_face:

5

Hello!

You were so helpful with the last event, but now we are looking to have it for another event.

Our ECOAT Boot Camp Proceedings and ECOAT 2026 - Wednesay & Thursday Proceedings will stay on our website for another year as it gives our attendees access to the proceedings. Are you able to help me with reorganizing them as well as take them out of “Past Events?”

6

Hi there, @user28357 :waving_hand:

I’ve just checked your widget and see that you’ve used the same script and it’s working fine. The thing is that Custom JS doesn’t operate in the widget editor, so you can see changes on the website, where the widget is installed or via Share Link:

image
image1627×890 78.2 KB


Please check it out and let me know if everything is fine on your end :wink: