How to get a link to events with a specific host

Ask the Community Customization
1

Hi, I am trying to apply this to my event calendar but I’m not completely clear about the code needed to install this (I’m not a coder). I want to create a situation where I can have url that lead to a pre-filtered view of the main calendar filtered by each host. (Then in a newsletter to our members I can link them directly to a pre-filtered calendar of their topics of interest (the ‘host’).
Any advice? thanks

1 Like
3

Hi there, @user9145 :wave:

Could you please send me a link to the page where your widget is installed, or just specify its ID (if it’s not installed yet)?

4

Hi Max

This is the page where we ahve our programme. The filter we call “Stage of the Path” corresponds to “Host” in Elfsight. I’d like to pre filter to each one of these ‘Stages of the path” and have a url link that I can share with members for each one. This allows our members to just see the events that are of most interest to them and not get overwhelmed by the entire programme.

thanks for your advice

Gill

5

It seems that the link hasn’t been attached. Could you please resend it?

6

Sorry. Here it is.
https://www.rigpa.org/programmes-for-the-rigpa-sangha

All the best
Gill

1 Like
7

Thanks! I’ve shared your requests with the devs and will let you know once the solution is ready :slightly_smiling_face:

8

Hi there, @user9145 :wave:

Here is the code that will add the paramaters with the chosen host to the page URL:

const WIDGET_ID = 'elfsight-app-e51b14f0-6102-486a-a802-89963ec7c158';

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

function handleUpdateURL(value) {
  const url = new URL(window.location.href);

  if (!value) {
    url.searchParams.delete('host');
  } else {
    url.searchParams.set('host', value);
  }

  history.pushState({}, '', url);
}

function handleUpdateHost(container, delay) {
  const url = new URL(window.location.href);
  const preselectedHost = url.searchParams.get('host');

  if (!preselectedHost) {
    return;
  }

  setTimeout(() => {
    const mutationObserver = new MutationObserver((_, observer) => {
      const modal = document.querySelector(
        '.eapp-events-calendar-filter-modal'
      );
      if (!modal) {
        return;
      }

      const hostList = modal.querySelectorAll(
        '.eapp-events-calendar-filter-item'
      );
      const targetHost = [...hostList].find(
        (host) => host.textContent === preselectedHost
      );
      if (!targetHost) {
        return;
      }

      requestAnimationFrame(() => {
        targetHost.click();
      });
      observer.disconnect();
    });
    mutationObserver.observe(document.body, { childList: true });

    container.click();
  }, delay);
}

listener(
  `.${WIDGET_ID}:not([data-updated]) .eapp-events-calendar-controls-hosts`,
  (host) => {
    const container = host.closest('[class^="elfsight-app"]');
    container.dataset.updated = 'true';

    const blockLength = document.querySelectorAll(
      `.${WIDGET_ID}[data-updated=true]`
    )?.length;
    const delay = (blockLength ? blockLength : 0) * 100;
    handleUpdateHost(host.firstChild, delay);

    const mutationObserver = new MutationObserver(() => {
      const filterBlock = host.querySelector(
        '.eapp-events-calendar-filter-filtered'
      );

      handleUpdateURL(filterBlock?.textContent || '');
    });
    mutationObserver.observe(host, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }
);

Please add it to the Custom JS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face: