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:

1 Like
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:

1 Like