Kompatibilität:

WebSite X5 Evo und Pro

Wenn Sie Google Calendar schon verwenden, wissen Sie sicher, wie nützlich dieses Werkzeug ist, um sich Termine und Fristen zu notieren und nichts zu vergessen. Würden Sie gerne die Kalender auf Ihrer Website anzeigen, wo Sie Ihre Aktivitäten organisieren? Ihre Benutzer könnten so die Termine für die nächsten Veranstaltungen oder die Verfügbarkeit für Ihre Reservierungen nachprüfen. Mit dem neuen Zusatzobjekt Google Full Calendar können Sie das mühelos tun.  Ihre Kalender können Sie mit einem Klick integrieren und anpassen, und Sie sich sicher, dass sie immer aktuell sind. Bitte finden Sie einige Beispiele auf der Vorschauseite, probieren Sie das Objekt aus und optimieren Sie die Organisation Ihrer Arbeit!


Importieren Sie den Kalender

Wichtig ist, dass Sie einen oder mehr Kalender mit Google Calendar erstellt haben:

  • Öffnen Sie Google Calendar: Links finden Sie eine Liste Ihrer Kalender.
  • Stellen Sie die Maus auf den gewünschten Kalender, damit die 3 Punkte angezeigt werden: Klicken Sie dann im Menü auf Einstellungen.
  • Im Bereich Kalender integrieren finden Sie die Kalender-ID: kopieren Sie sie (auch mit der Tasten STRG+C).
#Tipp - Achtung: Damit Sie die Kalender-ID finden, muss der Kalender öffentlich sein. Mehr Informationen über Google Calendar finden Sie auf der offiziellen Anleitung.


  • Öffnen Sie jetzt WebSite X5 und Ihr Projekt, dann fügen Sie das Objekt Google Full Calendar auf die gewünschte Seite ein, wo den Kalender vorhanden sein muss.
  • Doppelklicken Sie auf das Objekt, das Sie hinzugefügt haben, um das Einstellungen-Fenster zu öffnen.
  • Bleiben Sie im Bereich Inhalte und klicken Sie auf Hinzufügen: Ein neuer Kalender ist jetzt in der Liste der Kalender vorhanden. 
  • Wählen Sie den Kalender aus der Liste aus und umbenennen Sie ihn mit dem Feld Titel.
  • Fügen Sie (auch mit STRG+V) ins Feld Kalender-ID die ID ein, die Sie von Google Calendar kopiert haben. 
  • Definieren Sie die Hintergrundfarbe und die Textfarbe für die Termine, die im Kalender angezeigt werden.


Wiederholen Sie diese Schritte für alle Kalender, die Sie brauchen: Mit den Optionen Hinzufügen und Entfernen können Sie sie einfügen und ausblenden, wenn Sie möchten. 

So ist es viel einfacher. Wenn Sie z. B. eine Sporthalle haben, könnten Sie einen Kalender für die Termine, die für den Spinning-Kurs, den CrossFit-Kurs oder den Pilates-Kurs verfügbar sind. So können die Besucher auf einem einzigen Kalender die Termine für alle Kurse sehen, jeder mit einer eigenen Farbe, und daher werden sie sich ein klareres Bild über Ihr Angebot machen können.


Definieren Sie die Einstellungen

Jetzt sollen Sie definieren, wie der Kalender auf Ihrer Webseite angezeigt werden soll:

  • Öffnen Sie den Bereich Einstellungen.
  • Definieren Sie zuerst die Größe des Kalenders. Wenn die Option Automatische Höhe aktivieren aktiv ist, nimmt der Kalender eine Höhe an, die nach einem vorgegebenen Verhältnis auf der Grundlage seiner Breite auf der Seite berechnet wird (bestimmt durch das Layout der Objekte). Wenn diese Option nicht aktiv ist, können Sie dagegen die Höhe in Pixel selbst bestimmen: Sollte mit diesem Wert nicht genug Platz für die Anzeige der Kalender geben, wird eine Scrollbalken automatisch angezeigt.
  • Jetzt, je nach dem Ergebnis, das Sie erreichen möchten, können Sie diese Optionen aktivieren:
    • Link an Termindetails aktivieren: Beim Klicken auf den Kalender, wird der Benutzer die eventuellen Details des Termins ansehen und ihn in seinen Kalender hinzufügen.
    • Terminzeit anzeigen.
    • Arbeitsfreie Tage anzeigen: Für diese Option ist die Aktivierung und Einstellung der Arbeitszeit erforderlich (mehr Informationen finden Sie auf Arbeitszeit und -ort festlegen). 
    • Nummer der Woche anzeigen.
  • Stellen Sie dann die gewünschte Anzeige für den Kalender ein. Die möglichen Optionen sind: Jahr, Monat, Woche, Tag, Woche mit Uhrzeiten, Tag mit Uhrzeiten. Wenn Sie die Option Jahr auswählen, wird der Kalender alle Monate des Jahres anzeigen, und Sie werden die Tabellen für jeden Monat (mit der Option Spalten pro Monat) anpassen. Für jede Anzeige, die Sie aktivieren, wird eine entsprechende Schaltfläche auf der Kopfzeile des Kalenders hinzugefügt: So werden Sie Benutzer die gewünschte Anzeige auswählen. Mit der Option Vordefinierte Anzeige können Sie definieren, welche Anzeigen beim Öffnen des Kalenders angezeigt werden muss. 


Definieren Sie den Stil

Jetzt sollen Sie nur den Stil des Kalenders einstellen, damit er sich auf der Website besser integrieren kann:

  • Öffnen Sie den Bereich Stil.
  • Mit der Option Zu stilisierende Elemente können Sie das gewünschte Element auswählen, und dann entsprechend verschiedene Aspekte anpassen.
  • Wenn Sie 1 - Allgemein auswählen, können Sie einige allgemeine grafische Einstellungen für den Kalender definieren: Schriftart, Größe und Farbe der Texte, Hintergrund- und Randfarbe des Rasters, Text- und Hintergrundfarbe der unterschiedlichen Termine.
  • Wenn Sie dagegen 2 - Kopfzeile auswählen, können Sie die Kopfzeile des Kalenders anpassen. Sie können:
    • Den Titel des Kalenders anzeigen lassen. Der Inhalt des Titels hängt von der Anzeige ab. Sie können für den Titel die Größe, die Farbe und die Schriftart definieren. 
    • Die Hintergrundfarbe.
  • Sie können dann 3 - Schaltflächenauswählen und daher den Stil der Navigations- und Ansichtsschaltflächen in der Kopfzeile des Kalenders definieren. Sie können:
    • Die gewünschte Schaltflächen definieren, die angezeigt werden müssen: Mit dem Befehl Art können Sie festlegen, dass keine Schaltfläche, die Schaltflächen Weiter und Zurück, oder die Schaltflächen Weiter, Zurück und Heute angezeigt werden.
    • Die Farbe für den Text, den Hintergrund und die Ränder der Schaltflächen Beim Mouseover und Beim Loslassen definieren.


#Tipp - Alternativen. Neben dem Objekt Google Full Calendar ist auch das Objekt Full Calendar verfügbar. Der Unterschied zwischen diesen beiden Objekten ist sehr groß. Mit Google Full Calendar binden Sie durch die entsprechende ID einen Google Calendar auf Ihre Website ein, der ständig in Echtzeit aktualisiert bleibt und der direkt mit Google Calender angepasst werden kann. Mit Full Calendar importieren/exportieren Sie Kalender mit .ICS-Dateien. Eventuelle Änderungen auf dem originalen Kalender werden nicht automatisch online angezeigt, d. h. Sie werden die ICS-Datei auf Ihrer Website entsprechend aktualsieren sollen. 


Sind Sie schon neugierig, wie dieses Objekt auf Ihrer Website aussieht? Installieren Sie sofort Google Full Calendar


Fehlen Ihnen Credits für den Kauf dieses Objekts? Alle Kreditpakete ansehen.