Customizing Your Calendar
Once you’ve created a Calendar using our Calendar Tags feature, you can customize the experience that visitors will have as they browse your events.

To learn more about Calendar tags, see Getting Started with Calendar Tags.

Pre-filter events on your page

You can automatically filter your events so that visitors only see the set of events that meet the criteria you specify. To do so, add a filter to the initialization script:
apiFilters : [{"ANY LIVE API FIELD":{"CONDITION":["VALUE"]}}],

For example, if you have local store pages, and you want to put a calendar at the bottom of each that only shows events for the page’s location, you would add this filter:
apiFilters : [{"storeId":{"equalTo":["ID_OF_STORE"]}}],

To only show events with “Gourmet” in the name, include the following filter:
apiFilters : [{"name":{"contains":["Gourment"]}}],

With the filter below, your calendar will only show events scheduled after the current date:
<script>
    var isoDate = new Date().toISOString();
    var now = isoDate.substring(0, isoDate.lastIndexOf(':')).replace('T', ' ');
    EventCalendar.Initialize({
        apiKey: 'YOUR LIVE API KEY HERE',
        resultsTemplate: '#result-template',
        resultsElement: '#results',
        apiFilters : [{"startDateTime":{"ga":[now]}}],
        // the rest of your initialization script 

    });
</script>

You can use any well-formed Live API filter in your initialization script. For more information on Live API filters, see Using the Live API and the Live API documentation.

Format event dates

You can use FormatJS in Handlebars to format the date and time in your results. For example, if you wanted the month names in your calendar to be abbreviated, you would add the following code:
<div class="date-day"> {{formatDate Event.startDateTime month="short"}} </div>

To learn more about date-formatting options, see the FormatJS documentation.

Create an “Add to Calendar” button

Creating an “Add to Calendar” button for your events allows visitors to add events to their Google, Apple, or Outlook calendars.

AddToCalendarButton

To create the button, add the following code to your result-template div:
<script id="result-template" type="text/template">

// The rest of your template 

    <div class="btn-group mt-2">
        <button type="button"
                class="btn btn-outline-primary btn-block dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                style="min-width: 230px;">
          Add to Calendar
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{{GoogleCalendarLink}}" target="_blank">
            Google
          </a>
          <a class="dropdown-item"
             href="{{IcsLink}}"
             download="{{Event.name}}-{{formatDate Event.startDateTime}}.ics">
            Outlook
          </a>
          <a class="dropdown-item"
             href="{{IcsLink}}"
             download="{{Event.name}}-{{formatDate Event.startDateTime}}.ics">
            Apple Calendar
          </a>
        </div>
    </div>
</script>

We recommend that you import Popper.js in your page’s head for a smooth UI:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Add images

You can add images to your event tiles, as shown in the example below.

EventTileImage

To do so, simply retrieve images from the appropriate field in Yext using Handlebars. The code below shows how to add the first photo from your Event’s photos field to the event’s tile:
<script id="result-template" type="text/template">
    <div class="container mb-4">
        <div class="row border" style="border-radius: 10px;">
            <div class="col px-0 background-image" style="background-image: url('{{Event.photos.0.url}}'); border-top-left-radius: 10px; border-bottom-left-radius: 10px;">
            </div>

            <div class="col-8 px-3 pt-3">
                <h4 class="card-text">{{Event.name}}</h4>
                <p class="card-text"><strong>{{formatDate Event.startDateTime day="numeric" month="long" year="numeric"}}</strong></p>
                <p class="card-text description">{{Event.description}}</p>

                <div class="event-tickets pb-3">
                    <a class="btn btn-outline-secondary" role="button" href="{{Event.url}}">View Website</a> {{#if Event.ticketUrl}}
                    <a class="btn btn-outline-secondary" role="button" href="{{Event.ticketUrl}}">Get Tickets</a> {{/if}}
                </div>
            </div>
        </div>
    </div>
</script>

Show “Loading” content

If there’s something specific that you would like to show visitors while the calendar is being loaded (e.g., “Loading…”), you can specify it in your code.

LoadingTemplate

First, declare the “Loading” template in the initialization script:
 <script>

    EventCalendar.Initialize({
        apiKey: '3662421a932a9bf10491994d9eb27044',
        resultsTemplate: '#result-template',
        resultsElement: '#results',
        // the rest of your initialization script 

        loadingTemplate: '#loading-template',        
    });
</script>

Then, define the template anywhere on your page:
<script id="loading-template" type="text/template">

<!-- Add whatever you like below --> 
<div> Loading Results...</div>

</script>
The HTML you place in the script tag will appear while the list of events is loading wherever you placed your <div id=“results”> </div> element. It will disappear automatically when all events are loaded.

Specify the number of results per page

You can specify how many events appear in your list by including the code below and setting the value for resultsPerPage:
 <script>

    EventCalendar.Initialize({
        apiKey: '3662421a932a9bf10491994d9eb27044',
        resultsTemplate: '#result-template',
        resultsElement: '#results',

        // the rest of your initialization script 

        resultsPerPage: '10', 


    });
</script>

Add pagination

To add page controls to your list, place the code below where you would like the controls to appear:
<div class="btn btn-outline-secondary ect-paginate-start"> <i class="fa fa-angle-double-left"></i> </div>
<div class="btn btn-outline-secondary ect-paginate-back"> <i class="fa fa-angle-left"></i> </div>
<div class="btn btn-outline-secondary ect-paginate-forward"> <i class="fa fa-angle-right"></i> </div>
<div class="btn btn-outline-secondary  ect-paginate-end"> <i class="fa fa-angle-double-right"></i> </div>

Pagination