Advise for Elfsight regarding Event Calendar in order to grow functionality and usecases:
- Make it possible to use the Event Calendar without having to use dates but only weekdays and times
- Create the option to hide the date within the weekday view
- Make Tags selectable like Venues, Hosts and Event Types
- Add the possibility for a strip planning layout
Hey there! 
For our Dutch local amateur football associaton FC Weesp we use an Excel strip planning to show training times per day, time, age category and field. This Excel is not styled as it was never meant to serve as the communication towards players/parents but solely as the back bone for something more user friendly. But -as things go within an organization running solely on volunteers- it has served as the training scheduele on our website for seasons on end. In our search for a user friendly alternative we’ve implemented a slightly tweaked Elfsight’s Event Calendar.
The result can be seen in our training scheduele section at fcweesp.nl where players and parents can now easily filter the scheduele for their team. In this article we’ll explain how we’ve come to this so it can hopefully help others who are trying to achieve a similar goal.
Before starting to implement this we’d advise to read the full article first as you might find it might be quicker to integrate steps.
Before
After
Step 1: Creating events and bypassing dates
The biggest issue you’ll run into right away is that Elfsight’s Event Calendar needs dates in order to create an event. We could go ahead and use todays date and set the recurrence feature within an event to have the training session repeat weekly but this is unwanted because it will become an actual calendar. We don’t want that as things become cumbersome with maintaining holidays for instance and other periods when there is no training. We wanted something that only shows a “regular” weekly scheduele.
In order to achieve this we’ve taken a week somewhere far into the future (at the time of writing, anyway). For Monday we’ve used Monday July 1st 2030. We’ve done this as a workaround so the events we’ve created will not become Past events for quite some time. For Tuesday we’ve used Tuesday July 2nd 2030, etc. See the screenshot below:
We have training sessions that are recurring on another day which are handled by the Repeat functionality within the Event screen. For instance we have the Under 13 train on Monday at 19:15 and also the same time on Wednesday. In those cases, we’ve used the Repeat option within the event and made it reoccur once that week and stop after. See the image down below:
Using the future dates and making recurrences only within the week itself we’ve managed to have our whole training scheduele planned and shown in only the week of Monday July 1st 2030. Perfect!
The thing left to do now is to have Event Calendar hide the date which is still shown in the widget (see bottom image). This is the only thing standing between a calendar and a weekly scheduele.
In order to do this, we’ve placed JavaScript within the Event Calendar settings. Go to Settings and click on Custom JS to add code. Here is the code (generated by Gemini) that we’ve used to hide the date.
NOTE! The date will still show within the Elfsight environment but will not show in the published widget on your website.
setInterval(function() {
// 1. Define the function first, before calling it
const updateDates = function(context) {
const dateElements = context.querySelectorAll('.eapp-events-calendar-date-element-item');
dateElements.forEach(function(element) {
if (element.textContent.includes(',')) {
element.textContent = element.textContent.split(',')[0];
}
});
};
// 2. For when the script runs outside the widget
const esRoots = document.querySelectorAll('.es-embed-root');
esRoots.forEach(function(root) {
if (root.shadowRoot) {
updateDates(root.shadowRoot);
}
});
// 3. For when the script runs inside the Shadow DOM
updateDates(document);
}, 100);
Using this code concludes creating your training scheduele and hiding the date within the widget.
Step 2: Venues, Categories, Tags, Hosts and filters
For every event you create you have the option to set a venue, multiple tags, multiple categories and multiple hosts. Here we’ll explain how we’ve used those to benefit filtering by users.
Venues
As we use football fields we’ve added all our pitches as venues in the Events → Venues screen. Afterwards we are able to add one or multiple fields to a particlar event. The screenshot below shows the venues created:
Categories
As we have senior players, youth players and external use of our pitches we’ve added different categories in the Events → Event Types screen. Afterwards we are able to add one or multiple categories to a particlar event. The screenshot below shows the categories created:
Tags
We’ve used tags to add teams per event. Sadly, unlike for example Venues and Categories, you can’t predefine tags meaning you’ll have to manually add them for every event even if they are the same. However, the Event Calendar does group tags that are the same so that’s a positive. The screenshot below shows all the Under 8 team tags created for one event.
Hint: you can duplicate an event. So, say your event for Under 9 also has many teams you could duplicate and change the 8 to a 9 in each tag instead of writing all new tags.
Hosts
We have thought about using Hosts to show per event what coaches are responsible per training but as we have many switches in volunteers we’ve chosen not to do that because it will become too much work to keep it updated. But, this could be a good usecase. As with Venues and Event Types you can select one or more hosts per event.
Filters
As we’re Dutch speaking and used to different names for Venues, Event Types and Tags we’ve used the built-in option of the Event Calendar to change the words that are used for this. When you go to Settings and the Edit Texts you’ll be able to change the wording shown to users. Here we’ve changed (in Dutch) Venues to Fields, Event Types to Categories and Tags to Teams. The screenshot below shows the Edit Texts window:
Having done all this you should be able to have your own weekly schedule! Obviously, somewhere shortly before July 1st 2030 we’ll/you’ll have to change the event dates a few years forward again but that’s a problem for future us/you! Also, who knows Elfsight might have made an official option for this by then so it won’t be needed!
We hope this helps you as much as it did FC Weesp!
Extra content
I’ve added screenshots of other settings in order you’re looking for more settings we might have that differ from yours:
). Having said that, I can imagine it would be a big technical challenge as it undermines the very basis of the Event Calendar setup and therefor a lot of work for only a niche group of users.
