Display all events without Load More button

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.

1 Like

@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 :slight_smile:

  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 :slight_smile: