Event Calendar: How to make certain filter selected by default

[Max]

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

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

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

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>

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>

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

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

Faced difficulties or got questions? Describe your use case below this post and we’ll gladly help

[Anna98]

Hi! This is getting close to what we need, but we really need to sort it by tag, not by date/event type/venue/host – is this possible yet?

Or can we change the word “Host” to a custom term?

[Max]

Hi there

Yes, I agree that it would be a great option to filter events by tag. We already have a similar request in the Wishlist. You can keep an eye on it here - Need To Add Custom Filters

As for the changing host to a custom word, you can do this in the Messages section on the Content tab:

Check it out and let me know if it helped

[Matthew7 (Matthew)]

@Max

data-elfsight-app-filter-host="Astros"

Hello Elfsight. I am implementing this for the first time right now. And we have different teams, but multiple hosts per team and I want to feature all of their events on their web pages. Is there a way to select multiple filters per attribute (i.e. more than one host).

Thanks
Matt

[Max]

Hi @Matthew7

Your request is with our devs now. I’ll let you know once I receive a response from them

[Max]

@Matthew7 Unfortunately, it’s impossible to set several conditions for one filter, I am really sorry

Now, you can only select different filters at once.

Please let me know if this explains things or if you have any further questions.

[Sam_Kirby]

@Max

data-elfsight-app-filter-event-type="Home">

Hi Max, wondering if you could also provide the code to have “All but one” selected. I.e - I’m looking to have 8 different event types automatically show (just not one specifice selection, unless directly selected)

Thanks in advance,

[Max]

Hi there @Sam_Kirby

Currently, it’s impossible to do this. However, we see that it would be a nice addition, and I’ve added this idea to the Wishlist.

You can keep an eye on it here - Add multiple attributes for one filter (pre-selected filters option.

[user8602]

The code for filtering by host is just not working. Ideas?

[Max]

Hi there, @user8602

Could you please send me a link to the page where your widget is installed?