Thank you for the heads up.
I have my calendar app on two different pages of my website: one as a grid version on the homepage (www.festivalzone.com) and the other as a list version on https://festivalzone.com/pages/festivalagenda.
Recently, I made some adjustments to the app myself and managed to set up a filter (called: Genre) with selectable options that adds an extra dimension to the filtering. I also added an “erase selection” button in the dropdown filter, and included numbers so that each option immediately shows how many events are available with this tag. Finally, I implemented an “erase all filters” option that essentially just refreshes the page. If you check out my website, you can see how everything functions—and you can review my code in the Elfsight app on my account.
For the grid version, everything works perfectly with no errors. However, in the list version I encountered two problems. First, the numbers are not correct—each option does not display the accurate count of events actually in the calendar. Second, not every option appears in the filtering. These issues seem to be related to the “Load More Events” button in the list version. When you click on “Load More Festivals (Bekijk meer),” the numbers in the filter update incorrectly. I would really like to fix this, but I don’t think I can do it myself, and I hope you can help me.
There are three possible solutions for this:
Disable lazy-loading via the widget’s configuration (e.g., by setting parameters like "lazyLoad": false or "pagination": false in the JSON configuration) so that all events are loaded at once.
Retrieve the full dataset via an API—if the widget provides one—to calculate the correct numbers for the filter dropdown.
Programmatically force all events to load (for example, by automatically triggering the “Load More” functionality until all events are displayed) before building the filter dropdown and calculating the totals.
For the list version i dont mind if all the events are seen. I hope it would be possible to view all events per month but if that means that the filtering is not accurate than i just prefer all the events on 1 page.
If you like you can use my code for further development of the app or to share with other members. Maybe they like my functionalities too .
I hope i explained everything right and you understand what i mean. If not please let me know.
You’re right, the issue occurs because of the Load More button, and the only workaround here is to display all events right away. For this, please add this script at the end of your Custom JS code:
async function clickLoadMoreButton() {
while (true) {
const button = await waitForElement('.eapp-events-calendar-load-more-button-component');
if (!button) break;
button.click();
await new Promise(resolve => setTimeout(resolve, 10));
}
}
clickLoadMoreButton();
Hi Max,
Thank you so much for your reply. I’ve made the adjustments and am really satisfied with the result—thanks again!
I was wondering if you could help me with one last thing, and then I think I’ll have the best calendar I could have imagined.
Currently, when viewing the calendar on the agenda page (https://festivalzone.com/pages/festivalagenda), I think it would look better if the events were smaller, allowing visitors to see more events at a glance. Right now, visitors can only see about 3 events without scrolling. Ideally, I’d like visitors to be able to see around 9 or 10 events at once.
If we assume that each event currently takes up around 85% of the screen’s width, it would be great if we could reduce that to about 55%. Vertically, I think the events should be reduced by about 50%. For the images, it would look best if their height aligns with the start and end points of the text. I’ve prepared an example showing a before-and-after view, which you can find in the following link.
So summarized;
Horizontal: 55%
Vertical: 50% less
Image: Aligned with start en end points of the text
Date design: Vertically over full event
Texts comprimised for good fit.
If we successfully make these adjustments, it will also create some empty space on the right side of the page—maybe we can use that space for advertisers But that’s for the future, haha.
For the grid version, I’ll leave it as it is for now and wait until it’s possible to limit it to displaying just the next 3 months, or until we can add a festival search function for better usability.
Thank you in advance, Looking forward to your thoughts!
Thank you once again for the adjustments!
Unfortunately i see that the genre filter doesnt work anymore now. And i see that the responsivenes of the list version on mobile version turns into a grid version. (this was before your adjustments) Could you make it a list version on mobile version aswell?
.
- 
But that’s for the future, haha.