Recurring Events Show One at a Time

[Abel_Mendez]

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.

[Max]

Hi there, @Abel_Mendez and welcome to the Community

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

[Logan_Carroll]

Yes! The Elfsight team should make this a feature!

[Max]

Hi there, @Logan_Carroll

I see that you’ve opened a support ticket and reported that the script above didn’t work for you. Our devs adjusted the script for your widget:

(function() {
  const ITEM_SELECTOR = '.eapp-events-calendar-grid-item-container';
  const TITLE_SELECTOR = '.eapp-events-calendar-grid-item-name';
  const IMAGE_SELECTOR = '.eapp-events-calendar-media-image';

  function hideDuplicates() {
    const events = util.findAllElements(ITEM_SELECTOR);

    const seen = new Set();

    events.forEach((event) => {
      const title =
        event.querySelector(TITLE_SELECTOR)?.textContent?.trim() || '';

      const image =
        event.querySelector(IMAGE_SELECTOR)?.src || '';

      const key = `${title}|${image}`;

      if (seen.has(key)) {
        event.style.display = 'none';
      } else {
        seen.add(key);
        event.style.display = '';
      }
    });
  }

  util.waitForElement(ITEM_SELECTOR).then(() => {
    hideDuplicates();

    setTimeout(hideDuplicates, 1000);
    setTimeout(hideDuplicates, 3000);
  });
})();

Please add it to the Custom JS field and let me know if it worked for you

[Max]

We also agree that it would be awesome to have this option available in the settings. If you’d like this feature to be released, please upvote this Wishlist idea - Display only the closest occurrence of the repeated events

[Logan_Carroll]

Hey there @Max,
This almost worked how I wanted it to. While it does only display one of the recurring events at a time, there are other events that happen after the weekly recurring event (July 20th) that I’d like to display right after that one recurring event, if possible.

Also, when you click on ‘Next Events’, the Javascript is no longer applied.

Thank you for yall’s hard work.

[Max]

Unfortunately, there is no way to create a custom script that will work stable for multipage layouts. The good news is that our devs are going to add an interal setting to the widget that will let us implement your idea.

I’ll report back as soon as I have any news