Wie verbinde ich Google Kalender mit der Website?

von Dez. 6 2020 Alle anleitungen Google Widgets 0 Kommentare

Návod na prepojenie webu s Google Kalendárom

Google Kalender – große Hilfe beim Zeitmanagement

 

Google Kalender ist eine Onlinedienst zur privaten Terminverwaltung

In diesem Tutorial erfahren Sie, wie Sie Google Kalender in Webnode-Websites einbetten.

1. Der erste Schritt besteht darin, ein Google-Konto zu erstellen – hier.

2. Dann finden Sie in der offiziellen Hilfe von Google Informationen zum Erstellen von Google Kalender und zum Abrufen des HTML-Codes Ihres Kalenders.

3. Legen Sie in den Kalendereinstellungen im Abschnitt „Zugriffsberechtigung“ den Kalender als öffentlich (public) fest

4. Fügen Sie den HTML-Code des Kalenders in die Webnode-Website ein.

Sie können diesen Code nutzen und ihn an einer beliebigen Stelle im Inhalt Ihrer Website einfügen, auf der Google Kalender angezeigt werden soll.

<div class="googleCalendar">PLACE THE GOOGLE CALENDAR IFRAME CODE HERE</div>
view raw google-calednar.html hosted with ❤ by GitHub

5. Klicken Sie nun in der oberen Leiste des Editors auf „Seiten“ »“ Wählen Sie die Seite aus, auf der Sie Google Kalender haben „» „Einstellungen SEO-Seite“ »“ HTML Code der Kopfzeile „. und fügen Sie diesen Code dort ein:

<style>
.googleCalendar{
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.googleCalendar iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
view raw google-calednar.css hosted with ❤ by GitHub

Und FERTIG.

Google Kalender ist in die Website eingebettet und responsive, dh die Größe des Kalenders passt sich an mobile Geräte (Mobiltelefone, Tablets usw.) an.

Der Kalender sieht folgendermaßen aus:

Zusammenfassung:

Sie werden 2 Codes auf der Website einfügen. Dersten Code bearbeiten Sie und fügen ihn mithilfe der HTML-Funktion in Webnode in den Hauptteil der Seite (<body>) ein.

Den zweiten Code fügen Sie in den Seitenkopf (<head>) in den SEO-Einstellungen der Seite ein, auf der Sie den Kalender eingefügt haben.

Code in den Hauptteil der Seite

Code in die Kopfzeile der Seite

<div class="googleCalendar">PLACE THE GOOGLE CALENDAR IFRAME CODE HERE</div>
view raw google-calednar.html hosted with ❤ by GitHub
<style>
.googleCalendar{
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.googleCalendar iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
view raw google-calednar.css hosted with ❤ by GitHub

Weitere tolle Tutorials

War dieses Tutorial hilfreich? Teilen Sie es bitte.

Erstellen Sie jetzt eine Website
Viliam
Follow me
Letzte Artikel von Viliam (Alle anzeigen)
0 0 votes
Article Rating
Abonnieren
Benachrichtige mich bei
guest


0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments