Zusammen mit dem forum1.5 bieten wir für die Bayreuther Wandelinitiativen einen gemeinsamen Wandelkalender für alle Veranstaltungen und Aktivitäten aus dem Bereich des ökologisch-sozialen Wandels an. Dieser kann zum Beispiel beim TransitionHaus angesehen werden. Doch wie bekommen wir die Termine der eigenen Initiativen in diesen Kalender? Und wie kann ich die Termine der anderen Initiativen auf meine eigene WordPress-Webseite wieder einbinden? Dies erklären wir hier, ggf. bieten wir dazu in Zukunft auch Workshops an.

Eigene Termine zur Verfügung stellen

Dazu gibt es verschiedene Ansätze: (1) per eigener Nextcloud/ownCloud, (2) ber die Plattform WiWa1.5 des forum1.5 bzw. Wechange (3) über verschiedene Kalender-Plugins von CMS-Systemen (z.B. WordPress) oder (4) per Google-Kalender. Weitere Anbieter öffentlicher *.ics*-Feeds können natürlich auch genutzt werden.

Termine im Kalender der Initiativen sollten dabei verständlich dargestellt werden:

• Eindeutig zuzuordnender Titel (z.B. “Hamsterbacke KoKreis” anstatt “Vereinstreffen” <- von wem denn?)
• Gepflegt werden, z.B. Ausfall klar kommunizieren (z.B. “Entfällt: Mitanpacken am Naturgarten”)
• Möglichst nur die Termine der eigenen Initiative enthalten (sonst gibt es Verwirrungen)

Nextcloud / ownCloud

Einige Vereine in Bayreuth (imaginärraum, Die Summer, TransitionHaus) nutzen Nextcloud. Initiativen, welche stark mit dem TransitionHaus verbunden sind, nutzen es dort für die Raumplanung und die Webseite.

• Es muss die Kalender-App installiert sein
• Kalender erstellen und nach der Initiative benennen (z.B. FlickWerk)
• Kalender als Link teilen und den Link kopieren, z.B. so:

https://eigene-cloud.webseite.de/remote.php/dav/public-calendars/JFo4A7XXsBcZ6ic2

• An den Link noch folgendes Kürzel hängen:

/?export

• Link ggf. zusammen mit einem individuellen Farbcode in diesem Pad auf WiWa1.5 hinterlegen
• ggf. Bescheid geben, damit es in die Webseiten aktualisiert werden kann

WiWa1.5 / Wechange

Die Plattform WiWa1.5 des forum1.5 kann über Gruppen oder Projekte eine exportierbare Kalenderfunktion anbieten. Das funktioniert auch auf der Mutterplattform Wechange.

• Nur Mitglieder einer Gruppe oder eines Projektes können den Kalender teilen!
• Bei Aktuelle Veranstaltungen auf Zeige alle… klicken
• Rechts unten Feed für Veranstaltungen anklicken
• Wenn es Unterprojekte gibt und deren Veranstaltungen mit exportiert werden Häkchen setzen
• Link kopieren
• Link ggf. zusammen mit einem individuellen Farbcode in diesem Pad auf WiWa1.5 hinterlegen
• ggf. Bescheid geben, damit es in die Webseiten aktualisiert werden kann

CMS-Plugins

• WordPress “Events Manager”: Für ics-Feeds an den jeweiligen Kalender, Veranstaltungsort oder die Veranstaltungskategorie “ics” anhängen, z.B. https://transition-bayreuth.de/locations/transitionhaus/ical/ (Beispieltermine!)
• WordPress “The Events Calendar” (Serientermine nur per CSV-Import)
• …

Google-Kalender

Grundsätzlich raten wir von der Nutzung von Google aus Datenschutzgründen grundsätzlich ab. Google hat dazu aber eine Anleitung gemacht (Achtung, Link zu Google)

Kalender und Termine in eigene WordPress-Webseite einbinden

Es gibt zwei kostenfreie WordPress-Plugins, welche mehrere *.ics*-Feeds in Webseiten einbinden können.

IFrame

• Funktioniert auch mit Nicht-Wordpress-Webseiten!
• Kalender-Seite erstellen (es empfiehlt sich hier ein Template ohne Seiten-Widgets, in den meisten Themes gibt es etwas wie “Full Width”)
• folgenden Code eingeben:

<iframe style="border: none;" src="https://forum1punkt5.de/wandelkalender-monatsansicht/" width="100%" height="1000px">

• Dabei kann neben der Monatsansicht (https://forum1punkt5.de/wandelkalender-monatsansicht) auch eine Listenansicht für schmale Inhalte gewählt werden (https://forum1punkt5.de/wandelkalender-listenansicht; im Falle von mobilen Endgeräten oder zu schmaler Iframes wird automatisch ein dem Listenformat ähnliches Format gewählt)
• Breite und Höhe des Iframe ggf. anpassen

ICS Calendar (mit WordPress)

• Plugin in WordPress installieren
• Kalender-Seite erstellen (es empfiehlt sich hier ein Template ohne Seiten-Widgets, in den meisten Themes gibt es etwas wie “Full Width”)
• In die Text/HTML-Ansicht des WordPress-Editors wechseln und
• entweder einfach komplett den Kalender vom forum1.5 und dem TransitionHaus übernehmen: Dazu diesen Code kopieren und in WordPress (Text-HTML-Ansicht) einfügen
• oder selbst zusammenzustellen nach folgendem Schema:

ics_calendar url="https://ics-links-kalender-1 https://ics-links-kalender-2 https://ics-links-kalender-3" color="hex-code-farbe-kalender-1 hex-code-farbe-kalender-2 hex-code-farbe-kalender-3" feedlabel="name-kalender-1|name-kalender-2|name-kalender-3" title="false" description="false" view="month" eventdesc="true" location="true" legendinline="true" legendposition="below" linktitles="true" showendtimes="true"

• Danach einmal um alles eckige Klammern setzen [ ]
• Für “https://ics-link-kalender-n”, “hex-code-farbe-kalender-n” und “name-kalender-n” können die Adressen, Farben und Kalendernamen diesem Pad auf WiWa1.5 entnommen werden
• Einstellungen können nach den Plugin-Empfehlungen auch anders vorgenommen werden
• Folgende CSS-Formatierungen ermöglichen eine optimale Ansicht des Kalenders und der Einträge:

.ics-calendar-month-grid th {
  background: #877ccc;
  color: white;
}
.ics-calendar-month-grid td {
  border: 0px solid #a9a9a9;
}
.ics-calendar-month-grid .day {
  background: #f0eff9;
}
@media (max-width: 799px) {
  .title_in_hover_block,
  .time_in_hover_block {
    display: none;
  }
  .title,
  .location,
  .eventdesc a {
    font-weight: 600;
  }
}
@media (min-width: 800px) {
  .no_phone {
  font-size: 150%
  }
  .ics-calendar .event .hover_block {
    background: #fff;
    border: 1px solid #a9a9a9;
    box-shadow: 2px 2px 5px rgba(25,25,25,0.1);
    max-width: 600px;
    min-width: 380px;
    padding: 0.4em 0.6em;
    position: absolute; top: calc(100% - 0.4em); left: 3em;
    font-size: 120%;
  }
  .ics-calendar .past .hover_block {
    background: #f2f2f2;
  }
  .ics-calendar-month-grid .past {
    background: #f2f2f2;
    opacity: 1;
  }
  .hover_block a,
  .location,
  .hover_block .title {
    font-weight: 600;
  }
  .title {
    font-size: 15px;
    font-weight: 400;
  }
  .ics-calendar-month-grid .event {
    border: 2px solid #ccc;
  }
  .ics-calendar-list-wrapper h5,
  .ics-calendar-list-wrapper h4 {
    margin-bottom: -10px;
  }
}
.title a,
.location a,
.eventdesc a {
  color: black;
}
.title,
.eventdesc,
.title_in_hover_block {
  color: #333
}
.ics-calendar-color-key-header {
  font-weight: 600;
}
.ics-calendar-month-grid .today .day {
  background: #018b98;
}

• CSS kann beispielsweise entweder direkt im HTML gesetzt werden (“inline”):

<style type="text/css"> .class-muster-objekt {eigenschaft: wert; } </style>

• Oder auch im WordPress-Admin-Bereich unter Design > Customizer > Additional CSS direkt eingefügt werden

amr event lists with ical files

Dieses Plugin erlaubt die komplette, eigenständige Formatierung mit CSS passend zur Seitenformatierung. Anleitungen im Internet: https://icalevents.com