Wie Sie einen Kalender in WordPress einbinden

von

am

|

geschätzte Lesezeit:

8 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Ferienwohnung Kalender in WordPress einbinden

Dieser Tage bat mich eine Kundin, die Verfügbarkeitskalender ihrer Ferienwohnungen auf ihrer Website wieder verfügbar zu machen. Bis vor gar nicht so langer Zeit funktionierte das Ganze noch mittels eines Widgets, das eines der von ihr genutzten Portale zur Verfügung gestellt hatte. Nun verweist das nur noch auf die Buchungsseite. Den Kalender bieten die Portale allerdings als iCalendar an, sodass man ihn synchronisieren kann. Es stellt sich also die Frage, wie sich so ein Kalender in WordPress einbinden lässt.

Verfügbarkeit via iCalendar

iCalendar, das ist ein Datenformat zum Austausch von Kalenderinhalten, dessen Dateiendung je nach Betriebssystem .ical oder .ics lautet. Welche Inhalte so ein iCalendar austauscht, spielt dabei erst einmal keine Rolle. Das könnten Kurstermine sein. Oder die Geburtstage deutscher Dichter und Denker. Im Fall meiner Kundin geht es also um die Verfügbarkeit ihrer Ferienwohnungen. Dabei soll die Buchung weiterhin über die üblichen Portale funktionieren. Und für die müssen die Kalender natürlich synchronisiert sein. Sonst käme es zu Doppelbuchungen. Deshalb bieten die Portale den sogenannten ICS-Feed.

Nun kommt noch die eigene Website ins Spiel. Auch die kann diesen ICS-Feed darstellen, braucht dafür allerdings eine Funktionserweiterung. Sprich: das passende Plugin.

Mit ICS Calendar einen Kalender in WordPress einbinden

Möglichkeiten, einen Kalender in WordPress einzubinden, gibt es einige. Darunter kostenfreie ebenso wie Bezahlangebote. Zudem besteht natürlich die Möglichkeit, die ICS-Feeds der Portale erst einmal in einen Google Kalender einzubinden, um dann diesen auf die Website zu bringen.

Überdies stellt sich die Frage, was der Kalender über die Darstellung der Verfügbarkeit hinaus noch können soll. Sprich: Wenn über den Kalender auch noch die Buchung stattfinden soll, braucht es natürlich mehr Funktionen.

Bei meiner Kundin ging es aber tatsächlich nur um die Darstellung der Verfügbarkeit ihrer Ferienwohnungen. Weshalb ich ihr dazu geraten habe, nur so viel Funktion auf die Website zu bringen, wie sie braucht. Deshalb bot sich hier das Plugin ICS Calendar an.

Grundlage von allem: ein funktionierender ICS-Feed

Aber auch das beste Plugin braucht einen Feed, der funktioniert. Die ersten Versuche, einen ihrer beiden Kalender einzubinden, wollten leider mit keinem Kalender- oder Buchungs-Plugin klappen. Was die Frage aufwarf, ob

a) die Plugins alle nichts taugen,
b) der Feed selbst Murks ist oder
c) das Problem mal wieder vor dem Rechner sitzt.

Ersteres hielt ich für unwahrscheinlich, letzteres für absolut denkbar. In der Tat lag es aber am Feed, der konsequent statt vieler Buchungen immer nur zwei Reservierungen angezeigt hat. Fragen Sie mich nicht, was da schiefgelaufen ist. Mit dem Feed des anderen Portals hat es schließlich geklappt.

Der ICS Calendar Shortcode

ICS Calendar stellt für die Ausgabe des ICS Feeds einen Shortcode zur Verfügung. Also eines dieser Dinger, die in eckigen Klammern [ ] daherkommen und auf jeder gewünschten (Beitrags)-Seite veröffentlicht werden können. Das Plugin liefert darüber hinaus Erläuterungen für einige Attribute, die man diesem Shortcode hinzufügen beziehungsweise modifizieren kann. Einstellungsoptionen im Sinne von ein Häkchen hier oder ein bisschen CSS im Plugin-eigenen Eingabefeld da gibt es nicht.

Der Shortcode sieht wie folgt aus:

[ics_calendar url="CALENDAR_FEED_URL" title="DISPLAY_TITLE" description="DISPLAY_DESCRIPTION"]

Dem Attribut url geben Sie nun also als Wert die Adresse Ihres Feeds. Bei title tragen Sie die gewünschte Überschrift ein (in meinem Fall ist das Ferienwohnung Verfügbarkeit). Und als description können Sie die gewünschte Beschreibung hinterlegen. Bei mir lautet die Wunderbare Ferienwohnung in grandioser Lage.

Sie wollen weder die Überschrift noch die Beschreibung nutzen? Dann geben Sie bei title und description einfach false an.

Wenn Sie sich nun eine Vorschau Ihrer Seite anschauen, auf der Sie den Shortcode eingegeben haben, sieht die wahrscheinlich ungefähr so aus:

ICS Kalender, unbearbeitet
reichlich grau und zu viel Information – mobil erscheint das Ganze als Liste

Ihre Daten sind natürlich andere. Mir geht es hier vor allem um die farbliche Gestaltung und die nicht unwesentliche Frage, ob man wirklich alle Daten veröffentlichen möchte. Was ich hier schon verändert habe und als belegt – Vorname erscheint, gibt tatsächlich die Vornamen der Gäste aus: belegt – Jürgen, belegt – Marianne, belegt – Susi. Das kann so natürlich nicht bleiben. Ändern lässt sich dies aber über die Shortcode Attribute.

Die Shortcode Attribute

Maskieren der Buchungsdetails

ICS Calendar bietet das Attribut maskinfo. Mit maskinfo="belegt" sorgen Sie dafür, dass es in der Ausgabe nun nur noch belegt heißt. Soll gar kein Text erscheinen, funktioniert maskinfo=" ". Auch tut es ein geschütztes Leerzeichen.

Ausblenden des Textes »ganztägig«

Den Hinweis auf die ganztägige Buchung auszublenden ist nicht unwesentlich. Denn die Angabe ist irreführend, da es ja sein kann, dass am ersten Tag der Buchung morgens der Mieter von der Vorbuchung erst auscheckt.

Auch hierfür gibt es ein Attribut: hidealldayindicator="true".

Die mobile Darstellung

Grundsätzlich sollte klar sein, dass es sich bei den einzelnen Kalenderblättern um Tabellen handelt. Die sind eigentlich auf Webseiten verpönt – früher bestanden ganze Websites aus lauter verschachtelten Tabellen. Bei einem Einsatzbereich wie diesen Kalenderblättern machen Tabellen aber auf jeden Fall Sinn. Allein auf Mobilgeräten könnte der Platz dafür fehlen.

Deshalb gibt ICS Calendar auf mobilen Geräten nicht die Kalenderansicht, sondern eine Listenansicht aus. Dahinter steht die Idee, dass mobile Geräte, vor allem Smartphones, den Kalender gar nicht komplett darstellen können. Dies gilt vor allem, wenn die einzelnen Tage auch noch die Buchungsdetails anzeigen sollen.

Die Listenansicht ist an sich nicht schlecht, zeigt standardgemäß aber nur die Tage an, die bereits gebucht sind. Das ist auf den ersten Blick nur gar nicht ersichtlich. Freie Tage, um die es einem Vermieter eigentlich geht, gehen hier komplett unter.

Um nun den Kalender wie auf dem Desktop als Tabelle mit allen gebuchten und freien Tagen auch auf mobilen Geräten anzuzeigen, braucht es das Attribut nomobile="true".

Das Format der Wochentage

Die Bezeichnung der Wochentage benutzt erst einmal ganze Worte: Montag, Dienstag, etc. Will man allerdings das Kalenderblatt auch auf mobilen Geräten ausgeben, ist die Abkürzung der Wochentage sinnvoll. Für ganze Worte fehlt einfach der nötige Platz. Für Mo, Di, Mi etc. hingegen reicht der Platz aus.

Dies funktioniert über: columnlabels="short".

Der vollständige Shortcode

Im ganzen Satz lautet der Shortcode nun also:

[ics_calendar url="URL zum ICS Feed der Ferienwohnung" title="Ferienwohnung Verfügbarkeit" description="Wunderbare Ferienwohnung in grandioser Lage" maskinfo="belegt" nomobile="true" columnlabels="short"]

Bemerke: Es sind noch weitere Modifikationen möglich. So zum Beispiel die Wochen- statt der Monatsansicht. Für den genannten Zweck funktioniert dieser Shortcode aber gut.

CSS Anpassungen für Farben, Größen und Abstände

Wenn man einen Kalender in WordPress einbinden will, möchte man vielleicht auch, dass der den eigenen Farben entspricht. Vielleicht passt auch die ein oder andere Größe noch nicht oder die Abstände der einzelnen Elemente stimmen nicht.

CSS-Angaben wie die folgenden schreiben Sie am besten einfach in das Zusätzliche CSS des Customizers Ihres Themes. Dort überleben sie auch Themeupdates. ICS Calendar bietet keine Option, eigenes CSS zu hinterlegen.

Monatsselektor links

Mir gefiel zum Beispiel nicht, dass der Monatsselektor rechtsbündig erscheint. Auch brauchte der noch ein wenig Abstand nach oben und unten. Da hilft:

/* Kalender Monatswahl anpassen */
.ics-calendar-select {
float: left;
margin:25px 0;}

Position des Buchungsdetails (maskinfo)

Nutzt man wie ich den textlichen Hinweis auf die gebuchten Tage, kann der Text ein wenig Abstand (margin) gebrauchen.

/* Kalender maskinfo Abstand */
.ics-calendar-month-grid .events .title {margin:20px 0 20px; } 

Farben für die Wochentage

Die Wochentage (Mo, Di, Mi etc.) stehen in der Headerzeile der Tabelle. Um die farblich vom Rest der Tabelle abzuheben, braucht es nur folgende CSS-Defintion:

/* Kalender Farben für Wochentag anpassen */
.ics-calendar-month-grid th {background-color:#632e9b; color:#fff;}

Hintergrundfarbe für die Tage (Datum)

Die Tabellenzellen, die das Datum des einzelnes Tages (1, 2, 3 etc.) ausgeben, lassen sich über die Klasse .day ansprechen. So können diese eine eigene Hintergrundfarbe erhalten:

/* Kalender Farben für einzelne Tage anpassen */
.ics-calendar-month-grid .day {background: #eee;}

Im Gegensatz zu dem dezenten Grauton aller anderen Tage lässt sich der heutige Tag farblich hervorheben:

/* Kalender Farben für den aktuellen Tag (heute) anpassen */
.ics-calendar-month-grid .today .day {
background: #632e9b;
color: #ffffff;}

Hintergrundfarbe für leere und vergangene Tage

So ein Monatskalenderblatt bietet unweigerlich mehr Tabellenzellen, als der Monat Tage hat. Die sollten farblich neutral bleiben. Dasselbe gilt auch für die vergangenen Tage.

/* Kalender Hintergrundfarbe für vergangene Tage und Tabellenzellen ohne Tag */
.ics-calendar-month-grid .off, .ics-calendar-month-grid .past {background:#fff;}

Zudem ist es ganz hübsch, wenn vergangene Tage mittels verringerter Deckkraft etwas in den Hintergrund treten.

/* Kalender Deckkraft für vergangene Tage */
.ics-calendar-month-grid .past
{opacity:0.5;}

Hintergrundfarbe für die gebuchten Tage

Dann braucht es natürlich noch eine deutliche Markierung der gebuchten Tage. In meinem Fall ist das ein Lilaton, ebenso passend zu meiner Akzentfarbe auf dieser Website wie die Hintergrundfarbe der Wochentage und des heutigen Tages. Sie würden natürlich Ihre Farbwerte wählen.

Zudem definiere ich hier noch die Höhe der Tabellenzellen und – da ich ja den textlichen Hinweis auf die Belegung nutze – auch noch die Ausrichtung dieses Hinweises.

/* Kalender Hintergrund für alle Termine */
.ics-calendar-month-grid ul.events li.all-day {
background: #ce9fff;
text-align: center;
height:6em;}

Anpassung für die Mobilansicht

Schließlich braucht auch noch die Mobilansicht etwas Anpassung. Wie gesagt: Tabellen machen sich auf Smartphones normalerweise gar nicht gut. Hier aber geht es ja nur um einen Überblick über die Verfügbarkeit der Wohnung. Das funktioniert auch auf kleinem Raum. Dennoch sollten die Tabellenzellen nun aber nicht mehr so hoch sein und alle Texthinweise wegfallen.

@media screen and (max-width: 782px) { 

/* Anpassung der Höhe der Tabellenzellen */
.ics-calendar.nomobile .ics-calendar-month-grid ul.events li.all-day, .ics-calendar.nomobile .ics-calendar-month-grid ul.events {
    min-height:3em;
    max-height: 3em;
}
/* Ausblenden des Buchungsdetails "belegt"
.ics-calendar.nomobile .ics-calendar-month-grid .events .title { visibility:hidden;  } 
}

Das CSS im ganzen Satz

/* Kalender Monatswahl anpassen */
.ics-calendar-select {
	float: left;
margin:25px 0;}

/* Kalender maskinfo Abstand */
.ics-calendar-month-grid .events .title {margin:20px 0 20px;} 

/* ==== FARBEN ==== */

/* Kalender Farben für Wochentag anpassen */
.ics-calendar-month-grid th {background-color:#632e9b; color:#fff;}

/* Kalender Farben für einzelne Tage anpassen */
.ics-calendar-month-grid .day {background: #eee;}

/* Kalender Farben für den aktuellen Tag (heute) anpassen */
.ics-calendar-month-grid .today .day {
background: #632e9b;
color: #ffffff;}

/* Kalender Hintergrundfarbe für vergangene Tage und Tabellenzellen ohne Tag */
.ics-calendar-month-grid .off, .ics-calendar-month-grid .past {background:#fff;}

/* Kalender Deckkraft für vergangene Tage */
.ics-calendar-month-grid .past
{opacity:0.5;}

/* Kalender Hintergrund für alle Termine */
.ics-calendar-month-grid ul.events li.all-day {
background: #ce9fff;
text-align: center;
height:6em;}

/* === Anpassungen für die Mobilansicht === */

@media screen and (max-width: 782px) { 

/* Anpassung der Höhe der Tabellenzellen */
.ics-calendar.nomobile .ics-calendar-month-grid ul.events li.all-day, .ics-calendar.nomobile .ics-calendar-month-grid ul.events {
    min-height:3em;
    max-height: 3em;
}
/* Ausblenden des Buchungsdetails "belegt"
.ics-calendar.nomobile .ics-calendar-month-grid .events .title { visibility:hidden;  } 
}

Kalender in WordPress einbinden ist nicht schwer

Vorausgesetzt, der ICS-Feed funktioniert und liefert brauchbare Daten, braucht es nur ein Plugin wie ICS Calendar, und schon können Sie Ihren Kalender in WordPress einbinden. Die Ausgabe klappt auch ohne weitere CSS-Anpassungen. Hauptsache, Sie wählen die passenden Attribute für den Shortcode. Mit etwas Individualisierung mittels CSS passt das Ganze dann aber vielleicht doch noch ein bisschen besser in Ihr Gesamtangebot.

Die Wohnung, deren Verfügbarkeit ich hier für die Screenshots benutzt habe, lässt sich übrigens wirklich buchen: Obenrüdener Kotten, Ferien im Industriedenkmal

3 Antworten zu „Wie Sie einen Kalender in WordPress einbinden“

  1. Besten Dank. Kommt auf meine ToDo-Liste für WordPress.

  2. Tobias

    Ich würde gerne via CSS noch weitere Änderungen vornehmen. Wäre hierbei eine Unterstützung möglich?

    So sollte es aussehen:
    Freitag, 22. April, 15:00 – 18:00
    VERANSTALTUNGSTITEL
    ADRESSE DER VERANSTALTUNG
    BESCHREIBUNG

    Zudem soll das Datum und Uhrzeit noch farblich abgesetzt werden. Mir gelinkt es aber nicht auf die Listenansicht via CSS zuzugreifen.

    Eine Unterstützung wäre top :) Vielen Dank

  3. Hallo Tobias,
    dazu bräuchte es mehr Info und einen Auftrag, der dann abzurechnen wäre. Bei Interesse bitte per E-Mail oder über eines der Kontaktformulare.
    LG, bk

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert