Ledencockpit Agenda API
DuZ & Co - 2023
Required: jquery
Voor het opzetten van deze agenda API is enige kennis van HTML vereist.
$.post('https://ledencockpit.nl/leden/agendaapi.php',{"maxreturn":8,"key":"uw_vereniging_api_code"}, function(data){
//Laad de data in de variable JSON:
var json = eval ("(" + data + ")");
// json.nbrfound = aantal gevonden evenmenten
// json.eventdate[] = array met datum
// json.eventname[] = array met naam van het evenement
// json.eventlocation[] = array met lokatie van het evenement
// json.eventdescription[] = array met de tekst uit het veld "Openbare informatie" bij het bewerken van het evenement.
// json.eventlink[] = array met de link uit het veld "Openbare informatie", hiermee kunt u eventueel de url meegeven van het de website waar meer informatie is te vinden.
// json.eventimage[] = array met de afbeelding welke is ge-upload bij "Openbare informatie" bij het bewerken van het evenement.
});
Kopie onderstaande code onderin uw web-pagina net boven de tag '</body>'
Gebruikt u WordPress, dan kunt u hier enige uitleg vinden hoe u code aan uw pagina kan toevoegen: WordPress Insert Code
<script>
// maxreturn: Geef aan hoeveel geplande evenmenten u wilt weergeven
// Indien u een negatieve waarde in geeft worden de laatste afgelopen evenement weergeven
var maxreturn = 8;
// targetID: Het id van het html-element in uw website waarin de gegevens moeten worden geladen
var targetID = "divAgendaItems";
// verkey: Dit is de API key welke kan worden gevonden in de ledencockpit bij Instellingen vereniging
var verkey = "123123123123";
// Geef hier de url van de afbeelding welke moet worden geladen indien er bij dit evenement geen afbeelding op de ledencockpit is ge-upload.
var default_image_url = "assets/img/agendafoto.jpg";
/*
==========================================================================
VOORBEELD Layout classes
Hiermee kunt u de styling van uw evenment items aanpassen.
<style>
div.event-item{
width: 25%;
float: left;
height: 500px;
background-color: white;
}
div.event-item.event-inverted{
background-color: grey;
}
div.event-heading{
padding: 30px;
}
h4.event-date{
color: black;
}
h4.event-subheading{
color: blue;
font-size: 16px;
}
div.event-body {
font-size: 12px;
color: red;
}
</style>
==========================================================================
*/
defer(function () {
var apiurl = 'https://ledencockpit.nl/leden/agendaapi.php';
$.post(apiurl,{"maxreturn":maxreturn,"key":verkey}, function(data){
var json = eval ("(" + data + ")");
if (json.nbrfound > 0){
for (i = 0; i < json.eventdate.length; i++) {
extrclass = ((isEven(i))?'':' event-inverted');
if (typeof json.eventimage !== 'undefined'){
if ((typeof json.eventimage[i] !== 'undefined')&&(json.eventimage[i] != "")){
var imagepath = "https://ledencockpit.nl/data/"+json.eventimage[i];
} else {
var imagepath = default_image_url;
}
} else {
var imagepath = default_image_url;
}
if (json.eventlink[i]){
var hasLink = '<a href="'+json.eventlink[i]+'" target="_blank" class="btn btn-lg"><i class="fa fa-info"></i> Meer info</a>';
} else {
var hasLink = '';
}
$("#"+targetID).append(
'<div class="event-item'+extrclass+'">'+
'<img src="'+imagepath+'" alt="">'+
'<div class="event-heading">'+
'<h4 class="event-date">'+json.eventdate[i]+'</h4>'+
'<h4 class="event-subheading">'+json.eventname[i]+'</h4>'+
'</div>'+
'<div class="event-body">'+
'<p>'+json.eventdescription[i]+'</p>'+
hasLink+
'</div>'+
'</div>'
);
}
}
});
}
function defer(method) {
if (window.jQuery) {
method();
} else {
setTimeout(function() { defer(method) }, 50);
}
}
function isEven(n) {
return n % 2 == 0;
}
</script>