Display all events without Load More button

[user1298]

Dear @Helga,

Thank you for your unlimited support!

I would like to show all events instead of pressing “load more” button.

Kindly consider this an urgent request with thanks.

[Helga]

@user1298 that’s a great suggestion, thank you!

At the moment, I can offer you two options, perhaps one of them will work for you

1. You could change your widget layout to Grid and have your events displayed without Load More button.

2. There is an option to hide the Load More button and automatically pull all the events when you have scrolled to them. If you’d love to try this option out, please add the following script to any place on the page with the Event Calendar widget:

<script>
    (() => {
        const start = Date.now();

        const inViewport = (elem) => {
            const bb = elem.getBoundingClientRect();
            return !(bb.top > window.innerHeight || bb.bottom < 0);
        };

        const clickWhenInViewport = (elem) => {
            if (inViewport(elem)) elem.click();
        };

        const rafAsync = () => new Promise(resolve => requestAnimationFrame(resolve));

        const getElement = selector => document.querySelector(selector);

        const checkElement = (selector) => {
            const elem = getElement(selector);

            if (!elem) {
                if (Date.now() - start > 15000) return Promise.reject();

                return rafAsync().then(() => checkElement(selector));
            } else {
                return Promise.resolve(elem);
            }
        };

        const addAutoClickOnLoadMore = () => {
            const selector = '.eapp-events-calendar-load-more-button-component';

            checkElement(selector).then((elem) => {
                    clickWhenInViewport(elem);

                    const handler = () => {
                        const actualElem = getElement(selector);

                        if (actualElem) {
                            clickWhenInViewport(actualElem);
                        } else {
                            document.removeEventListener('scroll', handler);
                            window.removeEventListener('resize', handler);
                        }
                    };

                    document.addEventListener('scroll', handler);
                    window.addEventListener('resize', handler);
                },
                () => {
                }
            );
        };

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addAutoClickOnLoadMore);
        } else {
            addAutoClickOnLoadMore();
        }
    })();
</script>

Please let me know if any of the solutions worked

[user1298]

Many thanks, @Helga!

Option #2 works well for me and as always your assist much appreciated.

[Helga]

It’s awesome that my solution worked, thanks for the update, @user1298!

And I’m always happy to help

[Siena_Muscianisi]

I don’t want people to have to keep pressing the button to see all the events.

[Max]

Hi @Siena_Muscianisi and welcome to the Community

Unfortunately, we don’t have such an option in the configurator. However, as Helga suggested above, there are 2 workarounds:

1. Change your widget layout to Grid and have your events displayed without Load More button.
2. Add a custom script to any place of your page

I see that you’ve tried to add this script to the Custom CSS field in the configurator, but not to your webpage. Please add this script to any place of your page (for example, right after the widget installation code) and let me know if it worked for you