Step 6: 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

<% elem.innerText %>