How to make certain Event Calendar filter selected by default

Are you looking to make a certain Event Calendar filter selected by default on the page the widget is installed on? Good news is you can do that following the step-by-step guide provided below.

Why you may need this feature

The functionality we're going to describe can be quite useful when you need to show the same Event Calendar widget on different pages of your website with certain filters pre-selected for user convenience. This means visitors can instantly see the most relevant calendar entries by default, while still having the option to explore the entire calendar if they choose to.

Currently, our Event Calendar widget allows users to filter events based on Date, Event Type, Venue, and Host:

The current settings of the widget don't allow making a specific filter as pre-selected, so the default picture looks as follows:

Want to know how to make a filter selected by default, as demonstrated in the example below? 

If so, please make sure to read the article all the way to the end.

Making a filter selected by default

To make a certain filter pre-selected, you will 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
	

These attributes, when added to the widget installation code, specify the filter type (Dates, Event Type, Venue, or Host) the widget should have pre-selected on the page where it is installed. 

Each attribute added to the widget installation code should have a value indicating which specific filter should be pre-selected. Here's what the installation code of the widget with pre-selected filter will look like:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-[filter-type]="[filter-value]"></div>

Below you'll find examples for each type of filter with pre-selected value.

1

Dates:
Would you like to have certain dates pre-selected in the widget right from the start? 

In this example, we've set the Dates filter to automatically display events that take place between 2030-12-01 and 2030-12-31. Here's how we've adjusted the installation code for the widget in this case:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-dates="2030-12-01, 2030-12-31"></div>
	

And this is how the widget will appear on the page where we add this code:

If you wish to showcase the events happening on a specific date, e.g. 2030-12-01, you only need to include that date as a value.

2

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://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-event-type="Home"></div>
	

3

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://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-venue="AT&T Park – San Francisco Giants"></div>
	

4

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://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-host="Astros"></div>
	

Making multiple filters pre-selected at once

Sometimes having one filter pre-selected is not enough. No worries! The functionality we described works well with multiple attributes added at once. 

The below example demonstrates how to make two filter types (in this case, Dates and Host) pre-selected at once:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></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>

Well done. Now that you know about this feature, you can efficiently use it to display your Event Calendar widget with different filters pre-selected!