Step 5: 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.

loading template

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.

<% elem.innerText %>