Skip to main content

Programming

DPCalendar upcoming events module
Pagination and back/next buttons

To be able to use the regular Upcoming Events module of DPCalendar without limiting the amount of events displaying in the module, I wrote a custom solution to «divide» the entries into pages.

  • When more than 5 (or n) events are present, the previous/next-buttons and the pagination appear.
  • When less than 5 (or n) events are present, the respective buttons/pagination don't show up.
  • On the first page, the previous-button doesn't show up.
  • On the last page, the next-button doesn't show up.

Main function (Javascript):

Use the following script/functions in a HTML-Block AFTER the DPCalendar Upcoming Events Module.

1. Define the variables

    var elements = document.querySelectorAll('.dp-event').length;
    var current_page = 1;
	var records_per_page = 5; //desired number of entries on one page

2. Function to count the number of pages

function numPages() {
	return Math.ceil(elements / records_per_page);
}

3. Function previous-page/button

function prevPage() {
	var records_per_page = 5;  //desired number of entries on one page
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
		var start = ((records_per_page * current_page) - records_per_page);
		var end = (start + records_per_page);
		$('.dp-event').addClass('uk-hidden');
		$('.dp-event').slice(start, end).removeClass('uk-hidden');
    }
}

4. Function for the next-page/button

function nextPage() {   
	var records_per_page = 5;  //desired number of entries on one page
    if (current_page < numPages()) {
        current_page++;
        changePage(current_page);
    }
    if (current_page == 1) {
    var start = 0;
	$('.dp-event').slice(0, records_per_page).removeClass('uk-hidden');
    }
    if (current_page > 1) {
        var start = ((current_page - 1) * records_per_page);
        var end = (start + records_per_page);
        $('.dp-event').addClass('uk-hidden');
        $('.dp-event').slice(start, end).removeClass('uk-hidden');
    }
}

5. Function to change the page

function changePage(page)
{
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
	var page_span = document.getElementById("page");
 
    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();
	page_span.innerHTML = page + "/" + numPages();
    if (page == 1) {
        btn_prev.style.visibility = "hidden";
    } else {
        btn_prev.style.visibility = "visible";
    }

    if (page == numPages()) {
        btn_next.style.visibility = "hidden";
    } else {
        btn_next.style.visibility = "visible";
    }
    
    if (numPages() <= 1) {
        $('#pages').addClass('uk-hidden');
    }
}

6. BEFORE the DPCalendar module, we need to enter the following in order to hide all entries with class = .dp-event

<script>
	jQuery(function($) {
		$('.dp-event').addClass('uk-hidden');
	}); 
</script>

7. Additional function AFTER the DPCalendar module to set page=1 when loading the website AND to show (unhide) the first n entries/the first page.

<script>
    $(document).ready(function() {
    changePage(1);
    $('.dp-event').slice(0, 5).removeClass('uk-hidden');
	});
</script>

8. AFTER the DPCalendar module, add the desired HTML for the buttons/pagination, example (UIkit/YOOtheme Pro):

<div class="uk-flex-middle uk-grid uk-margin-small-top" uk-grid>
    <div class="uk-width-expand">
        <a class="uk-button uk-button-secondary" href="javascript:prevPage()" id="btn_prev">vorherige</a>
<a class="uk-button uk-button-secondary uk-margin-small-left" href="javascript:nextPage()" id="btn_next">nächste</a>
        </div>
    <div id="pages"><p class="uk-text-small"><strong>Seite <span id="page"></span></strong></p>
        </div>
    </div>