Add IDs for Group Text

It would be great to have IDs for the elements with the group names. I am creating navigation links that jump to each month the calendar and I have to use “#:~:text=” because there is no specific identifier for the elements.

2 Likes

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

I’ve checked your website and see that your solution is working great. Do I get it right that you’d like to make the ID look neater (smth like #December)?

1 Like

While that solution works in most browsers now, it’s still not fully compatible with others. It also highlights the text being linked to, which isn’t the end of the world, but not the cleanest solution. So yes, I could definitely see a case for adding a unique name or ID attribute to each “eapp-events-calendar-date-element-item” so they could just be linked using those.

2 Likes

Got it, thanks!

Our devs can create a custom script that will move you to the chosen month when clicking on the month tab, but the ID won’t be added to the URL.

Would it be okay for you, or it’s important for your case to add the ID when choosing a month?

1 Like

That would be great! Thank you!

2 Likes

Just to clarify, the 1st option (without adding IDs) would be fine for you, am i right?

1 Like

Correct. IDs are not necessary if the script works in all browsers and allows me to jump to a month without highlighting the text as my current solution does.

2 Likes

Got it, thanks!

I’ve forwarded your request to the devs and will let you know once the solution is ready :wink:

1 Like

Hi there, @Jake_Buganski :waving_hand:

Thank you for waiting!

We’ve added this code to the Custom JS field on the Settings tab of your widget’s settings:


const waitForElement = (selector, root = document) => new Promise((resolve) => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            resolve(component);
        } else if (i !== 50) {
            setTimeout(check, 100);
            i++;
        } else {
            resolve();
        }
    };

    check();
});

waitForElement(".eapp-events-calendar-load-more-button-component").then((button) => {
    while (button) {
        button.click();
        button = document.querySelector(".eapp-events-calendar-load-more-button-component");
    }

    return Promise.resolve();
}).then(() => {
    const months = [...document.querySelectorAll(".eapp-events-calendar-list-item")];
    const formattedMonths = months.reduce((accumulator, monthBlock) => {
        const [month] = monthBlock.querySelector(".eapp-events-calendar-date-element-item").textContent.split(" ");

        return {
            ...accumulator,
            [month]: monthBlock
        };
    }, {});

    const monthLinks = document.querySelectorAll(".monthlink");
    monthLinks.forEach((link) => {
        link.href = "";

        link.addEventListener("click", (event) => {
            event.preventDefault();

            const [month] = link.textContent.split(" ");
            formattedMonths[month].scrollIntoView({
                behavior: "smooth"
            });
        }, { capture: true });
    });
});

Please check your website and let me know if you like the result :wink: