How to Make an Event Calendar Filter Selected by Default

Want to display your Event Calendar widget with a specific filter already selected?
Great news — it’s quick and easy! Follow this simple step-by-step guide to make it happen.

In this article

Why You May Need This Feature

This feature comes in handy if you want to display the same Event Calendar widget on different pages with different preset filters. This way, visitors see the most relevant events by default, but can still explore the full calendar if they wish.

The Event Calendar widget allows users to filter events by Date, Event Type, Venue, Host, and Tags:

By default, the widget loads with no filters applied — like this:

Want to know how to make a filter active by default, like in the example below?

Let’s see how you can set it up by simply adjusting your widget installation code.

Set a Default Filter

To make a certain filter pre-selected, you will need to add one of the attributes below to your widget installation code. Each attribute corresponds to a specific filter type:

Dates
data-elfsight-app-filter-dates
 Host
data-elfsight-app-filter-host
Event Type
data-elfsight-app-filter-event-type
 Tag
data-elfsight-app-filter-tags
Venue
data-elfsight-app-filter-venue
 Search
data-elfsight-app-search

These attributes, when added to the widget installation code, set which filter (Dates, Event Type, Venue, Host, Tags, or Search value) will be selected automatically when the widget loads.

Each attribute should include the filter value you want to show by default. Here is how the installation code looks with a pre-selected filter:

<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>

Click the toggles below to see examples with a pre-selected value for each filter type. 🚀

Dates


This example sets the Dates filter to automatically display events that take place 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>

And this is how the widget will appear on a site:

To show events for a single date, e.g. 2030-12-01, simply include that one date as the value.
Event Type


In this example, our widget features two Event Type filters: Home and Away. The example below sets Home as the 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


This code pre-selects the Venue filter for “AT&T Park – San Francisco Giants”:

<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:

<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 events with the Tag “San Diego” pre-selected:

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-tags="San Diego"></div>

Search Value


For displaying events filtered by specific Search criteria—such as the keyword 'Twins'—use the following installation code:

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-search="Twins"></div>

Please note that the WIDGET_ID mentioned in our examples always represents a unique ID assigned to each widget — Where to get your widget ID.

Pre-Select Multiple Filters at Once

Need more than one filter active by default? No worries! You can combine multiple attributes in the same code snippet.

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

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-host="Royals" data-elfsight-app-filter-dates="2030-12-01"></div>

Additionally, if you want to pre-select multiple values for a single filter, use the delimiter ";" when listing the values. For example, let’s pre-select two Hosts: 
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-filter-host="Royals; Astros"></div>

That’s it! Now you know how to make your Event Calendar widget display specific events right away. If you have any questions or need help, feel free to contact our Support Team — we’re always happy to assist! 🙌

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us

Related Articles