Event Calendar: How to display past events chronologically instead of the Past Events section (Grid)

Pro Tips Elfsight Widgets Tips
1

The solution is really simple! Just add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings and you’ll be fine :wink:

.eapp-events-calendar-layout-pastEventsTitle {
display: none;
}

And this script should be placed in the Custom JS field on the Settings tab:

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0
  }
};
function listenStep(args) {
  args.node = args.select(args.selector, args.root);
  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else
      args.reject();
  }
  else {
    args.resolve(args.node);
  }
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    ...customArgs
  };
  if (type === 'one' || type === 'all') {
    return new Promise((resolve, reject) => {
      listenStep({ ...args, resolve, reject });
    });
  }
}

asyncListenFor("#eapps-events-calendar-42efb307-9351-4bec-b3df-58d2c6a2dd0f").then(() => {
	const container1 = document.querySelector(
		'.eapp-events-calendar-layout-pastEvents .eapp-events-calendar-grid-component .eapp-events-calendar-grid-component'
	);
	
	const container2 = document.querySelector(
		'.eapp-events-calendar-events-calendar-layout > .eapp-events-calendar-grid-component .eapp-events-calendar-grid-component'
	);

	const items1 = Array.from(container1.children);
	const items2 = Array.from(container2.children);

	items1.forEach((item) => container1.removeChild(item));

	for (let i = items1.length - 1; i >= 0; i--) {
		container1.appendChild(items1[i]);
	}

	items2.forEach((item) => container1.appendChild(item));

	container2.remove();
});

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link


Guys, was this solution helpful? Let us know in the comments :slightly_smiling_face:

2 Likes