Step 2: Add Filters to your Calendar

You can use nearly any field in the Content Delivery API as an on-screen filter for your visitors.

filter examples

We’ll explain how this works, in general, then we’ll review specific examples.

Add Filters

First, you add filters in your initilization script. Below, we show a generic field in the Content Delivery API.

<script>
    EventCalendar.Initialize({
        // the rest of your inilization script 
        filters: [
            EventCalendar.Filters.LiveApiFilter({
                element: '.MY-CUSTOM-FILTER',
                query: function(value) {
                    return {
                        '<ANY-LIVE-API-FIELD>': {
                            contains: [value]
                        }
                    }
                }
            })
        ]
    });
</script>

Next, add the UI for the filters where you want them to appear on your page.

<!-- Other HTML on your page --> 

<input class="MY-CUSTOM-FILTER"> </div> 
<button type="submit" class="ect-search">Filter</button>   

<!-- Other HTML on your page -->

The HTML element we added above was declared in the initialization script. In general, you declare any filter you want to use in the initialization script and then render it in the HTML directly.

Let’s look at some specific examples.

Filter Examples — Filter by Location

Initialization script:

filters: [
    EventCalendar.Filters.Location({
        element: '.location-filter'
    })
]

UI on the page:

<div>
    <input type="text" class="form-control location-filter" id="location-filter" placeholder="Event Location">
</div>

Filter Examples — Filter by Date

Initialization script:

filters: [
    EventCalendar.Filters.Date({
        startDateElement: '.start-date',
        endDateElement: '.end-date' 
    })
]

UI on the page:

<div class="input daterange">
        <input type="text" class="form-control start-date"  placeholder="After this Date">
        <input type="text" class="form-control end-date" placeholder="Up until this Date">        
</div>

Filter by Other Fields

You can choose any text field in the Live API as an on-screen filter for your visitors. To learn more about the fields available to you, see the Live API documentation.

Initialization script:

filters: [
    EventCalendar.Filters.LiveApiFilter({
            element: '.venue-name',        // give the element a name that corresponds to the filter you're working with  
            query: function(value) {
                    return {
                            venueName: {         // use any text field from the Live API here 
                                    contains: [value]
                            }
                    }
            }
    })
]

UI on the page:

<div class="input">
        <input type="text" class="form-control venue-name"  placeholder="Event Venue">       
</div>

Feedback

<% elem.innerText %>