Event Calendar: Display all events instead of ten only (List layout)

Pro Tips Elfsight Widgets Tips
1

By default, List layout in our Event Calendar displays only first ten events. However, if you want to display all events, there is a workaround.

Just add this code to any place of the webpage where the widget is installed and you’ll be fine:

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

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

        const elemsLoop = (elems) => {
            elems.forEach((elem) => {
                clickWhenInViewport(elem);
            });
        };

        const clickWhenInViewport = (elem) => {
            while (document.body.contains(elem) && inViewport(elem)) {
                elem.click();
            }
        };

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

        const getElements = selector => document.querySelectorAll(selector);

        const checkElements = (selector) => {
            const elems = getElements(selector);

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

                return rafAsync().then(() => checkElements(selector));
            } else {
                return Promise.resolve(elems);
            }
        };

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

            checkElements(selector).then((elems) => {
                elemsLoop(elems);

                const handler = () => {
                    const actualElems = getElements(selector);

                    if (actualElems.length) {
                        elemsLoop(actualElems);
                    } 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>

Faced difficulties or got questions? Describe your use case in the comments and we’ll be happy to advise :wink: