Hi,
ich habe jetzt selbst mal einen Filter gebaut....allerdings schaffe ich es nicht auf das data-filter (von Calendar extend) zuzugreifen. Ich löse es via CSS Klassen. Außerdem wird dem aktiven Element der Filternavigation die Klasse "active" zugewiesen. Ein Beispiel könnt ihr temporär hier sehen: agentur-grenzbereich.com/de/terminkalender.html
1. Jeder Event bekommt eine CSS Klasse
2. Dem Kalender Listenelement die ID "termine" zuweisen
3. Filter HTML bauen (Inhaltslement oder Modul HTML)
Code:
<div id="category-nav">
<ul id="filterOptions">
<li class="active "><a href="#" data-filter="all" class="btn btn-visible">Alle</a></li>
<li><a href="#" data-filter="supermoto" class="btn btn-visible">Supermoto</a></li>
<li><a href="#" data-filter="enduro-andalusien" class="btn btn-visible">Enduro Andalusien</a></li>
<li><a href="#" data-filter="enduro-andalusien-einsteiger" class="btn btn-visible">Enduro Andalusien Einsteiger</a></li>
</ul>
</div>
4. j_filter_termine.html5 erstellen und im Layout einbinden
Code:
<script>
$(document).ready(function() {
$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).data("filter");
// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');
if(ourClass == 'all') {
// show all our items
$('#termine').children('div.layout_teaser').show();
}
else {
// hide all elements that don't share ourClass
$('#termine').children('div:not(.' + ourClass + ')').hide();
// show all elements that do share ourClass
$('#termine').children('div.' + ourClass).show();
}
return false;
});
});
</script>
Das funzt soweit recht gut.....die Kategorien müssen aber hardcoded werden und ich würde gerne auf das data-filter Attribut zugreifen das calendar_extend erzeugt. Aber ich finde nirgends im Netz wie man auf Attribute in dieser Form zugreifen kann.
Code:
data-filter="{"location_name":"Supermoto"}"
Wobei ich bei dieser Ausgabe eh denke das es zu viele Anführungszeichen sind. Diese Ausgabe wird erzeugt durch
Code:
<div class="col-lg-4 col-sm-6 event layout_teaser<?php echo $this->classList; ?>" data-filter='<?= $this->filter_data ?>'>
VG