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 page2. 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>