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:
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.
The template can go anywhere on your page, and you can customize the HTML however you like.
You’re all set. Your page will load a calendar containing all of your Yext Events.
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.
Next, add the UI for the filters where you want them to appear 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.
UI on the page:
UI on the page:
Initialization script:
UI on the page:
To obtain a Google Maps API key, follow steps outlined in the Google Maps API documentation.
Then, place the following HTML element where you want the map to appear on your page.
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
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.
