Want to make a certain filter of your Event Calendar widget be automatically selected on the page? Now you can do this, and we’ve got it covered in the guide below 
What are the benefits?
This feature is really handy for showing the same Event Calendar widget on different pages of your website with pre-selected filters.
It ensures that people can see the most relevant calendar entries right away and explore the full calendar at their convenience.
Making a filter selected by default
To make a certain filter pre-selected, you’ll need to add one of the following attributes to the widget installation code. Here’s a list of the attributes based on the filter type:
- Dates:
data-elfsight-app-filter-dates
- Event Type:
data-elfsight-app-filter-event-type
- Venue:
data-elfsight-app-filter-venue
- Host:
data-elfsight-app-filter-host
- Tags
data-elfsight-app-filter-tags
- Search
data-elfsight-app-search
Each attribute should have a value indicating the specific filter to be pre-selected. Here’s an example of how the installation code with pre-selected filter will look:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-[filter-type]="[filter-value]"></div>
Please note that the WIDGET_ID mentioned in the example always represents a unique ID assigned to each widget - Where to get your widget ID.
Examples of each filter type with pre-selected values
Dates
Want to pre-select specific dates in the widget from the start? Here’s an example where the Dates filter automatically shows events between 2030-12-01 and 2030-12-31:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-dates="2030-12-01, 2030-12-31"></div>
Event Type
In this example, our widget features two Event Type filters: Home and Away . With the installation code provided below, we’ve set the Home filter as default:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-event-type="Home"></div>
Venue
The following example illustrates that our widget will feature the AT&T Park – San Francisco Giants Venue filter pre-selected when the installation code provided below is used:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-venue="AT&T Park – San Francisco Giants"></div>
Host
By using the following installation code, we will make the Astros Host filter pre-selected on the page where we have added this code:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-host="Astros"></div>
Tag
This example shows you how to pre-select events with a specific tag (for instance, cricket):
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-tags="rugby"></div>
Search
Want to pre-select events using a specific search query? It’s also possible using this code:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-search="Astros"></div>
Making multiple filters pre-selected at once
Having just one pre-selected filter isn’t always enough. But worry not - you can easily select multiple filters at once by adding multiple attributes.
Here’s an example of how to pre-select two filter types (in this case, Dates and Host) at the same time:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-host="Astros" data-elfsight-app-filter-dates="2030-12-01"></div>
Making multiple options of the same filter pre-selected at once
Many of you wanted to pre-select multiple options of the same filter right away and now it’s also possible! For this, you just need to separate the chosen options with ; and you’ll be fine 
The example below shows how to pre-select 2 event types: Home and Away:
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-event-type="Home; Away"></div>
Faced difficulties or got questions? Describe your use case below this post and we’ll gladly help
