saraiwc Posted November 25 Posted November 25 (edited) The page I'm working on is https://www.innerworkcenter.org/program-calendar. I'd like to disable my page stylings for this block only (specifically, I don't want it to apply our brand fonts/sizing to the calendar events). I'm using the Elfsight Calendar widget in a code block. ____________________ Another question I have is how do I get the "Tags" drop down to look like the others? That has been created using the following code (it's a rough work around because Elfsight doesn't have the functionality to actually search by tag). //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(); }); 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); }); 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); observer.observe(eventsContainer, { childList: true }); }; select.addEventListener('change', refilter); document.addEventListener("click", (event) => { if (event.target.closest(".eapp-events-calendar-filter-item")) { refilter(); } }); }); Edited November 25 by saraiwc clarification
tuanphan Posted November 28 Posted November 28 Page url doesn't work Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment