Getting Started with Event Calendar Tags

Event Calendar Tags generate a fully functional calendar on your website. Simply copy a snippet of JavaScript and HTML, and the events you manage in Yext display as a beautiful calendar. Visitors can filter the calendar by any attribute of your events and search through a map.

Key benefits include:

Ability to create a calendar by copying and pasting code
Fully synced with your Yext Events
Integration with Google Maps
On-screen filters
Fully customized design, allowing you to control the look and feel of your calendar

What’s in this guide:

Create a calendar
Add filters to your calendar
Add a map to your calendar
Next steps

Create a calendar

To add a calendar to your site, follow the steps below.

1. Import eventcalendartags.js

This script should go right before your closing head tag. It can go anywhere, but we recommend putting it in the page’s head to avoid clutter.

<script src="https://assets.sitescdn.net/events/events.js"> </script>

2. (Recommended) Import Bootstrap for styling

We’ve built the calendar using Bootstrap elements. Importing this script will make your calendar look great out of the box.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

If you want to use Bootstrap more natively, follow the download instructions on Bootstrap’s site.

3. Initialize Calendar

Add the snippet below to the bottom of your page’s body.

NOTE: Be sure to enter your Live API key in the apiKey field. To learn more about API keys, see our Get Started guide.

Ideally, this script should be the last script tag on your page. Placing it at the bottom ensures that it will work with all other scripts and tags associated with the calendar.

<script>
    EventCalendar.Initialize({
        apiKey: 'ADD YOU API KEY HERE',
        resultsTemplate: '#result-template',
        resultsElement: '#results',
        filters: [
            EventCalendar.Filters.Date({
                startDateElement: '.start-date',
                endDateElement: '.end-date'
            }),
            EventCalendar.Filters.Location({
                element: '.location-filter'
            }),
            EventCalendar.Filters.LiveApiFilter({
                element: '.name-filter',
                query: function(value) {
                    return {
                        name: {
                            contains: [value]
                        }
                    }
                }
            })
        ]
    });
</script>

4. Build Calendar HTML

The template below defines what each event tile looks like:

<script id="result-template" type="text/template">
    <div class="row row-inset pt-3 pb-3 border-bottom border-primary">
        <div class="col-sm-9 d-flex  ">
            <div class="flex-column-centered calendar-item">
                <div class="text-primary date-month"> {{formatDate Event.startDateTime month="short"}}</div>
                <div class="date-day"> {{formatDate Event.startDateTime day="numeric"}} </div>
            </div>
            <div class="flex-column-left">
                <div>{{Event.name}}</div>
                <div>{{ Event.description }}</div>
                <div> <i class="fa fa-map-marker mr-2 text-primary"></i> {{Event.venueName}} - {{Event.address}} - {{Event.city}} </div>
            </div>
        </div>
        <div class="col-sm-3">
            <a href="{{Event.websiteUrl}}" target="_blank" class="btn btn-outline-primary "> View Details</a> 
        </div>
    </div>
</script>

The tile will look similar to the example below:

The template can go anywhere on your page, and you can customize the HTML however you like.

5. Place the results in the page’s HTML

Next, copy the code below to build the list of events. Copy it where you want the list to appear.

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

<div id=“results”> </div>

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

The list will look something like the example below.

You’re all set. Your page will load a calendar containing all of your Yext Events.

Add filters to your calendar

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

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

First, you add filters in your initilization script. Below, we show a generic field in the Live 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 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 dy 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>

Add a map to your calendar

To add a map to your calendar, provide your Google Maps API key in the initialization script below, and declare a map element.

To obtain a Google Maps API key, follow steps outlined in the Google Maps API documentation.

<script>
    EventCalendar.Initialize({
        apiKey: '3662421a932a9bf10491994d9eb27044',
        resultsTemplate: '#result-template',
        resultsElement: '#results',
        googleMapsApiKey: 'YOUR-API-KEY-HERE', 
        map: '#map' 
        filters: [
            EventCalendar.Filters.Date({
                startDateElement: '.start-date',
                endDateElement: '.end-date'
            }),
            EventCalendar.Filters.Location({
                element: '.location-filter'
            }),
            EventCalendar.Filters.LiveApiFilter({
                element: '.name-filter',
                query: function(value) {
                    return {
                        name: {
                            contains: [value]
                        }
                    }
                }
            })
        ]
    });
</script>

Then, place the following HTML element where you want the map to appear on your page.

<!-- Any other HTML on your page --> 

<div id="map"> </div>

<!-- Any other HTML on your page -->

The locations where your events are being held will be automatically shown on the map.

Next steps

You can tailor specific aspects of the visitor experience by following the steps in Customizing Your Calendar.