Termine auf Website integrieren

Dank der zentralen Komponente “Termine” können die verschiedenen Aktivitäten von Pro Velo auf einer Website (z.B. Regionalverbands-Website) integriert werden.

Folgende Termin-Kategorien stehen zur Verfügung:

  • Velofahrkurse aus dem Velofahrkurs-Tool
  • Velobörsen
  • Allgemeine Termine

Die zentrale Komponente stellt ein HTML-Snippet zur Verfügung, um die Termine anzuzeigen. Die Komponente stellt verschiedene Filter zur Verfügung, um alle Termine in einer Region, von einem Verband oder einer Kategorie anzuzeigen. Die Filter können auch kombiniert werden, um zum Beispiel alle Velobörsen eines Verbandes anzuzeigen.

Das HTML-Snippet sieht folgendermassen aus. Damit werden alle Termine, von allen Kategorien und allen Verbänden angezeigt.

<pv-cc-agenda ></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Termine nach Verband/Organisator filtern

Um nach einem Verband/Organisator zu filtern kann das Attribut organisations verwendet werden. Damit kann das Kürzel von einem oder mehreren Verbänden mitgegeben werden. Mehrere Verbände müssen mit einem Komma (,) getrennt werden. Das Attribut kann auch zusammen mit anderen Filter verwendet werden.

Folgendes Snippet kann verwendet werden um alle Termine von Pro Velo Bern und Pro Velo Region Thun anzuzeigen.

<pv-cc-agenda organisations="PVTH,PVBN"></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Termine einer Kategorie anzeigen

Die Kategorie kann mit dem Attribut categories gesteuert werden. Mögliche Werte sind bikeCourse, bikeMarket oder general. Es können mehrere Kategorien Komma-Getrennt (,) angegeben werden.

Folgendes Snippet kann verwendet werden um alle Velofahrkurse von Pro Velo Bern und Pro Velo Region Thun anzuzeigen.

<pv-cc-agenda categories="bikeCourse" organizations="PVTH,PVBN"></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Termine in einer Region anzeigen

Um Termine im Umkreis von einem Ort anzuzeigen kann folgendes Code-Snippet verwendet werden.

<pv-cc-agenda locationFilter="46.96089, 7.41998" locationFilterRadius="30"></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Die Werte 46.95288,7.46491 müssen dabei mit den Koordinaten des ensprechenden Ortes ausgetauscht werden. Die richtigen Koordinaten findet man zum Beispiel auf map.geo.admin.ch. Dort auf den ensprechenden Ort Rechts-Klicken und den Wert nach „WGS 84 (lat/lon)“ kopieren.

Suche aktivieren

Um die Suche zu aktivieren kann das Attribut enableSearch verwendet werden.

<pv-cc-agenda enableSearch></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Praxisbeispiele

Auf der Website von Pro Velo Aargau sollen auf der Homepage (https://pro-velo-ag.ch/) Termine angezeigt werden:

  • Es sollen alle Termine der fünf Aargauer RVs angezeigt werden (organizations="PVAA,PVBA,PVBW,PVLE,PVWO" und keine Einschränkung auf categories)
  • Es sollen maximal 20 Termine angezeigt werden (numberOfItems="20")
  • Es sollen nur Termine angzeigt werden, die innerhalb der nächste 300 Tage stattfinden (numberOfDays="300")
<pv-cc-agenda organizations="PVAA,PVBA,PVBW,PVLE,PVWO" numberOfItems="20" numberOfDays="300"></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>

Weiter soll auf der Seite mit den Infos zu den Velöbörsen die Termine angezeigt werden:

  • Es sollen nur Velobörsen angezeigt werden (categories="bikeMarket")
  • Es sollen die Termine der Aargauer RVs (organizations="PVAA,PVBA,PVBW,PVLE,PVWO") und die Termine, die sich im Umkreis vom 26km befinden (locationFilter="47.4021196859369,8.175704986447451" locationFilterRadius="26"), angezeigt werden.
  • Die Termine sollen durchsuchbaer sein (enableSearch)
<pv-cc-agenda enableSearch categories="bikeMarket" organizations="PVAA,PVBA,PVBW,PVLE,PVWO" locationFilter="47.4021196859369,8.175704986447451" locationFilterRadius="26"></pv-cc-agenda>
<script src="https://cc.extranet.pro-velo.ch/agenda/loader.js"></script>