Recurring Events Show One at a Time

Ask the Community Customization
1

I’d love to be able to set an event as recurring & then have only one of the occurrences show at a time.

For example, have a weekly event that last 10 weeks & as week 1 drops off week 2 shows, etc. So not all 10 weeks are visible at once.

2 Likes
3

Hi there, @Abel_Mendez and welcome to the Community :waving_hand:

I am happy to say that it’s possible to achieve this using this code in the Custom JS field on the Settings tab of your widget’s settings:

(function () {
  const waitForElement = (selector, root = document) =>
    new Promise((res) => {
      let i = 0;
      const check = () => {
        const component = root.querySelector(selector);
        if (component) {
          res(component);
        } else if (i !== 150) {
          setTimeout(check, 40);
          i++;
        }
      };
      check();
    });

  waitForElement('.eapp-events-calendar-events-calendar-layout')
    .then(() => {
      const containers = document.querySelectorAll('.eapp-events-calendar-grid-item');
      const seenContent = new Set();
      
      containers.forEach((container) => {
        const nameElement = container.querySelector('.eapp-events-calendar-grid-item-name');
        const imageElement = container.querySelector('.eapp-events-calendar-media-image');
        
        const eventName = nameElement ? nameElement.textContent.trim() : '';
        const imageSrc = imageElement ? imageElement.src : '';
        
        const contentHash = `${eventName}|${imageSrc}`;
        
        if (seenContent.has(contentHash)) {
          container.style.display = 'none';
        } else {
          seenContent.add(contentHash);
        }
      });
    });
})();

Note: Custom JS codes don’t work in the widget editor, so you’ll see the result right on your website


Give it a try and let me know how it worked :wink:

1 Like