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?
Thank you for your feedback.
I see that the dat on the left sid of the image has jumped back to the previous form:
Is that because the devs are working on it?
Thank you for your message, Thanks for fixing the issue with the filter works perfect!
Do you know why the custom list design is not possible? I am willing to pay to get it like in a list version on mobile.
Let me know if that is possible, and how much it would cost.
I was thinking about something like this.
I would prefer option 1 but if thats not possible than i would like option 2.
That means that the frame becomes a little wider the image smaller the text smaller so the length of the frame becomes as small as possible. The goal is to have as many festivals in one screen.
Let me know if this is possible, Thank you in advance!
I have been thinking about the design that i have sended today and i have changed my mind. I have made a design where the button is still underneat the text. I have made some examples. In the images you see a 1,2 and 3. I prefer #1, than 2 and if those are not possible #3. In the second image you see how the result then should look like.
In example number 1; it would be great if there could be a maximum of 7 or 8 genres (2 lines) in that case the location and venue are next to each other underneath it. Underneat the location and venue you see the button.
In example #2 the venue is at the top above the title. And the location is on the right side of the button.
In example #3 If a maximum amount of genres is not possible, then i rather have no genres because otherwise it takes to much space. In this case you could put the location and the venue in the middle.
I really really hope this would be possible to make. I understand that if this is possible, it takes time to built so like i said i am willing to pay for that. You guys have really helped me a lot and i know the time and effort it takes to make these things. I really apreciate that.
If you need more info, please let me know
Thank you so much, i am curious what you think about it.
.
- 
But that’s for the future, haha.
