Custom filters cusomization

Ask the Community Customization
1

Hi there. I test it, and it worked fine.
Two questions:

  1. Can I change the layout of the dropdown? It does not take mine css. … now got it, but not in the nicest wy …
  2. Is it possible to hide the mounth headline? It shows the headline with events, but the events are not showing because they are not part of the tag I chosse. (Understndable?)
    Now: Display:none … but than all are gone and it will keep the spaces while sortig ;-(

image
image1920×1080 86.3 KB

Thanks :slight_smile:strong text

1 Like
2

Hi @Dirk73, great to hear that the script worked for you!

Is it an option for you to give me a link to this test widget? We’ll be happy to see what we can do for you :slight_smile:

4

Hi @Helga , thanks for the answwer.
I kind of worket out the design.
But blendig out only the non useed headlines is an issue.

Dashbord
Website

The task filter is not the best, but for now it workes.
Any Idea when the new filters will be released?

There will although be multible choices in the filters, right? will it although work in the shortcuts? I mean like 2 or 3 venues at the same time?

Greetiumgs Dirk

1 Like
5

Hi Dirk, thanks for the info!

Here’s the updated JS script that hides the group date:

//Change filter name here
const DEFAULT_FILTER_LABEL = 'TAGS';
const DEFAULT_FILTER_VALUE = 'all';

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 !== 50) {
        setTimeout(check, 100);
        i++;
      }
    };

    check();
  });

function updatedGroups() {
  const groups = Array.from(
    document.querySelectorAll('.eapp-events-calendar-grid-group')
  );
  if (groups) {
    groups.forEach((item) => {
      const gridItems = Array.from(
        item.querySelectorAll(
          '.eapp-events-calendar-grid-component .eapp-events-calendar-grid-item'
        )
      );
      const isAllHidden = gridItems.every(
        (event) => event.style.display === 'none'
      );
      if (isAllHidden) {
        item.style.display = 'none';
      } else {
        item.style.display = 'block';
      }
    });
  }
}

waitForElement('.eapp-events-calendar-events-calendar-component').then(
  (widget) => {
    const select = document.createElement('select');
    select.id = 'es-custom-filter';
    select.classList.add('eapp-events-calendar-controls-item');
    select.classList.add('eapp-events-calendar-filter');
    select.classList.add('eapp-events-calendar-filter-current');

    // Add default option to the filter
    const defaultOption = document.createElement('option');
    defaultOption.value = DEFAULT_FILTER_VALUE;
    defaultOption.text = DEFAULT_FILTER_LABEL;
    select.appendChild(defaultOption);

    // Get all tags on the page
    const tags = [
      ...widget.querySelectorAll('.eapp-events-calendar-tags-item')
    ];

    // Add tags to the filter list
    const addedTags = [];
    const addTags = (tag) => {
      const trimmedTag = tag.innerText?.trim();
      if (!trimmedTag || addedTags.includes(trimmedTag)) {
        return;
      }

      const option = document.createElement('option');
      option.value = trimmedTag;
      option.text = trimmedTag;
      select.appendChild(option);

      addedTags.push(trimmedTag);
    };
    tags.forEach(addTags);

    // Place the filter after the other ones
    let filterContainer = widget.querySelector(
      '.eapp-events-calendar-controls-component'
    );
    if (!filterContainer) {
      let header = widget.querySelector(
        '.eapp-events-calendar-events-calendar-header'
      );
      if (!header) {
        header = document.createElement('div');
        header.classList.add('eapp-events-calendar-events-calendar-header');
        widget.prepend(header);
      }

      filterContainer = document.createElement('div');
      filterContainer.classList.add('eapp-events-calendar-controls-component');
      header.append(filterContainer);
    }
    filterContainer.appendChild(select);

    const filterEvents = (event) => {
      const selectedTag = select.value.toLowerCase();

      // Look if event has selected tag
      const eventTags = [
        ...event.querySelectorAll('.eapp-events-calendar-tags-item')
      ];
      const match = eventTags.some(
        (tag) => tag.textContent?.toLowerCase() === selectedTag
      );

      // Show/Hide the events
      if (match || selectedTag === DEFAULT_FILTER_VALUE) {
        event.style.display = 'flex';

        return;
      }

      event.style.display = 'none';
    };

    // Add event listener when filter selected
    const eventsContainer = widget.querySelector(
      '.eapp-events-calendar-list-events, .eapp-events-calendar-grid-component'
    );
    const callback = (mutationList) =>
      mutationList.forEach(({ type, addedNodes }) => {
        if (type !== 'childList' || !addedNodes.length) {
          return;
        }

        addedNodes.forEach(filterEvents);
        updatedGroups();
      });
    const observer = new MutationObserver(callback);

    const refilter = () => {
      observer.disconnect();

      const selectedTag = select.value.toLowerCase();

      // Met à jour le texte du filtre sélectionné
      if (selectedTag !== DEFAULT_FILTER_VALUE) {
        select.options[0].text = 'All'; // Change the first option when a filter is selected
      } else {
        select.options[0].text = DEFAULT_FILTER_LABEL;
      }

      // Get all events on the page
      let events = [
        ...widget.querySelectorAll(
          "[class*='eapp-events-calendar-'][class$='-item-component']"
        )
      ];
      const isGrid = events?.[0].classList.contains(
        'eapp-events-calendar-grid-item-component'
      );
      if (isGrid) {
        events = events.map((event) => event.parentNode);
      }
      events.forEach(filterEvents);
      updatedGroups();

      observer.observe(eventsContainer, { childList: true });
    };
    select.addEventListener('change', refilter);
    document.addEventListener('click', (event) => {
      if (event.target.closest('.eapp-events-calendar-filter-item')) {
        refilter();
      }
    });
  }
);

Let me know if it worked :slight_smile:

6

Hey Helga,

its perfectly working. Thank you so much.

One last question, its not posibble to only the month of where are events after sorting by tabsß
But this is perfekt.

Thank you!!

7

Hey Helga,

sorry its working more than perfect.
I forgot to remove the diplay none csss :slightly_smiling_face:

Now its fine :slightly_smiling_face:

1 Like
8

Awesome, thanks for the update, @Dirk73! :heart_eyes: