# How to make certain Event Calendar filter selected by default

**URL:** <https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116>\
**Category:** Help Center\
**Tags:** event-calendar\
**Created:** [March 14, 2024, 7:29pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116 "2024-03-14T19:29:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 14, 2024, 7:29pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/1 "2024-03-14T19:29:43Z")

</div>

Want to make a certain filter of your [Event Calendar](https://elfsight.com/event-calendar-widget/) 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:

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

```

  

![](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/2/2248c8e10d660d356ba8d68b76b6acbd58728f53.gif)

> 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](https://help.elfsight.com/article/1219-where-to-get-your-widget-id-in-new-dashboard).

  

## **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:
> 
> ```auto
> <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>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/9/d9b95faccacb02ec5ed239b7c48c91d7a20d8bc1.png)

  

> **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:
> 
> ```auto
> <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>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/1/314d925431520c24fec3ec715b965c0319138e88.png)

  

> **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:
> 
> ```auto
> <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>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/5/e521de1be66126cbbad1fd28c4923bbd391d4036.png)

  

> **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:
> 
> ```auto
> <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>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/3/b38ecc4a7a75bad6ef39fb847664e1aa363929de.png)

  

> **Tag**
>
> This example shows you how to pre-select events with a specific tag (for instance, cricket):
> 
> ```auto
> <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>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/6/9636e7cde7b149686aab2b826b0a4e633fa70c41.png)

  

> **Search**
>
> Want to pre-select events using a specific search query? It’s also possible using this code:
> 
> ```auto
> <script src="https://elfsightcdn.com/platform.js" async></script>
> <div class="elfsight-app-WIDGET_ID" data-elfsight-app-search="Astros"></div>
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/8/f8c73df3076dcc196d82ce821b96c98e3d919c72.png)

  

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

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/2/920e6c2ce66e63f7478b6e9b59478ec5bd77b4f1.png)

  

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

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/6/769505ca84ff5b2f6a04ce26d83842a9ed381556.png)

  

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 22, 2024, 10:55am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/2 "2024-03-22T10:55:45Z")

</div>

Split this topic on March 22, 2024, 10:55am UTC

6 posts were split to a new topic: [Event Calendar filter pre-selection issue](https://community.elfsight.com/t/event-calendar-filter-pre-selection-issue/44957)

---

<div class="post-metadata">

**Author:** ![Anna98](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Anna98](https://community.elfsight.com/u/Anna98)\
**Post date:** [March 22, 2024, 6:11pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/3 "2024-03-22T18:11:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 22, 2024, 6:22pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/4 "2024-03-22T18:22:10Z")

</div>

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](https://community.elfsight.com/t/need-to-add-custom-filters/6722)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/7/57286a587346c0169772d2623b74cc281711a4b8.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/b/cb0775a302196fcb5041438548f5a1d3f22e66de.png)

Check it out and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 17, 2024, 2:14pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/5 "2024-04-17T14:14:08Z")

</div>

Split this topic on April 17, 2024, 2:14pm UTC

A post was split to a new topic: [Display the message if the filter returns no events](https://community.elfsight.com/t/display-the-message-if-the-filter-returns-no-events/47977)

---

<div class="post-metadata">

**Author:** ![Matthew7](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Matthew7](https://community.elfsight.com/u/Matthew7)\
**Post date:** [May 17, 2024, 12:14pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/6 "2024-05-17T12:14:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 17, 2024, 4:05pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/8 "2024-05-17T16:05:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sam\_Kirby](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sam_kirby/32/8470_2.png) [@Sam\_Kirby](https://community.elfsight.com/u/Sam_Kirby)\
**Post date:** [July 26, 2024, 3:11am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/9 "2024-07-26T03:11:34Z")

</div>

> [@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,

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 26, 2024, 6:55am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/10 "2024-07-26T06:55:18Z")

</div>

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](https://community.elfsight.com/t/add-multiple-attributes-for-one-filter-pre-selected-filters-option/63091).

---

<div class="post-metadata">

**Author:** ![user8602](https://avatars.discourse-cdn.com/v4/letter/u/c77e96/32.png) [@user8602](https://community.elfsight.com/u/user8602)\
**Post date:** [September 23, 2024, 5:53pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/11 "2024-09-23T17:53:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 23, 2024, 7:34pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/12 "2024-09-23T19:34:08Z")

</div>

Hi there, @user8602 👋

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 14, 2025, 11:47am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/13 "2025-04-14T11:47:46Z")

</div>

Split this topic on April 14, 2025, 11:47am UTC

A post was split to a new topic: [How to get a link to events with a specific host](https://community.elfsight.com/t/how-to-get-a-link-to-events-with-a-specific-host/113741)

---

<div class="post-metadata">

**Author:** ![kanaka](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kanaka/32/56199_2.png) [@kanaka](https://community.elfsight.com/u/kanaka)\
**Post date:** [April 29, 2025, 5:32pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/14 "2025-04-29T17:32:29Z")

</div>

Hi,

This worked for me (using the filter Host) but how do I show previous events as well using the same filter?

Example: The host is “nyc” and previous events are using host: “nyc”. Can I get it to show all the past events?

---

<div class="post-metadata">

**Author:** ![kanaka](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kanaka/32/56199_2.png) [@kanaka](https://community.elfsight.com/u/kanaka)\
**Post date:** [April 29, 2025, 5:35pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/15 "2025-04-29T17:35:46Z")

</div>

NVM! Figured it out

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 30, 2025, 6:49am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/16 "2025-04-30T06:49:17Z")

</div>

Hi, @kanaka 👋

Glad to hear that you’ve resolved the issue! If anything else comes up, we’ll be delighted to help 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 29, 2025, 3:07pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/17 "2025-07-29T15:07:52Z")

</div>

Split this topic on July 29, 2025, 3:07pm UTC

3 posts were split to a new topic: [The pre-selfected filters option doesn’t work](https://community.elfsight.com/t/the-pre-selfected-filters-option-doesnt-work/133936)

---

<div class="post-metadata">

**Author:** ![Shire\_Talk](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/shire_talk/32/8198_2.png) [@Shire\_Talk](https://community.elfsight.com/u/Shire_Talk)\
**Post date:** [October 15, 2025, 10:06am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/18 "2025-10-15T10:06:05Z")

</div>

Ok ive got this working today which is great. Now can we hide a filter all together?

eg.  
Ive now got the one calendar on two different pages on my site. showing different events based on the “Tags” Can i hide the option on ONE of the pages to filter by “Tags”

Reason:  
page 1 has all the events  
Page 2 is only showing events of a topic, and i dont want to give them the ability to see all the other topics. which im using “tags”

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 15, 2025, 10:33am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/19 "2025-10-15T10:33:46Z")

</div>

Hi there, @Shire_Talk 👋

Could you please send me links to the pages, where the widget is installed and specify the page, where you’d like to hide a tag filter? I’ll be happy to check if it’s feasible 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 15, 2025, 2:24pm UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/20 "2025-10-15T14:24:49Z")

</div>

Split this topic on October 15, 2025, 2:24pm UTC

4 posts were split to a new topic: [Issue with pre-selected filters](https://community.elfsight.com/t/issue-with-pre-selected-filters/140623)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 8, 2026, 9:32am UTC](https://community.elfsight.com/t/how-to-make-certain-event-calendar-filter-selected-by-default/44116/21 "2026-04-08T09:32:38Z")

</div>

Split this topic on April 8, 2026, 9:32am UTC

4 posts were split to a new topic: [Custom display of event type](https://community.elfsight.com/t/custom-display-of-event-type/153319)