Add IDs for Group Text

Ask the Community Customization
1

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
2

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
3

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
5

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
6

That would be great! Thank you!

2 Likes
7

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

1 Like
8

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
9

Got it, thanks!

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

1 Like
11

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: