Onlinekalender auf komplette Seitenjänge per iframe einbinden

Hallo, ich kann deinen Booking-Kalender auf Firefox, Chrome und MS-Edge mit Win10 in voller Breite und Länge sehen. Z.B.: Kurztermin am 10. April 11 Termine frei um 7:10 … (nichts gebucht). Vielleicht mal den Browsercache löschen oder einen anderen Browser versuchen?!

Eigentlich solltest du deinen iFrame-code bei deiner Seite einbinden und uns dann zeigen, wie das bei dir aussieht!
Ich habe aber deinen Code, so wie oben angegeben, einmal in meiner Sandkiste (lokale WP-Installation) eingebaut. Das sieht nicht wirklich gut aus.
Grundlegend passen die Anführungszeichen nicht! Mit dem Block-Editor werden zwar richtige eingesetzt, aber die falschen bleiben bestehen. Damit ist nur ein kleiner iFrame Rahmen zu sehen mit eine Fehlermeldung. Mit den richtigen Anführungszeichen sieht es etwas besser aus. Der Kalender wird geladen. Mit einer Änderung des height: auf 1820px wird auch die Höhe besser.
Die verbleibende Frage ist, hast du auf dem Platz für das iFrame ausreichend Breite zur Verfügung? oder ist da ggf. eine Sidebar.

• Diese Antwort wurde geändert vor 5 Jahren von jostu55.
• Diese Antwort wurde geändert vor 5 Jahren von jostu55.

So klappt der Code bei mir –

<iframe src="https://outlook.office365.com/owa/calendar/Kalender@finanzberatung-albert.de/bookings/" scrolling="yes" style="border:0" width="100%" height="1820px"></iframe>

Ggf mußt du das height anpassen!

Mit Gutenberg im Code-Editor Modus,
Mit dem Classik-Editor im Text-Modus!!

einen neuen Beitrag erstellt und den Code wie oben beschrieben eingefügt.
Nachdem mein Theme eine Sidebar hat, war es vorerst auch schmal, genau 420px.
Das war aber rasch erklärt. Im CSS steht
/*********************************/
/* Phone layout */
/* (For 375px and larger) */
/*********************************/
@media (max-width: 1020px)
.
.
.mainContent {
max-width: 420px;
}
Sidebar ausgeblendet und die „primary“-class auf 100% gestellt und gut wars.
Also muß der Platz für eine „Breite“ Anzeige breiter als die 1020px sein. Worauf meine Frage zuvor gerichtet war 😉

https://s16.directupload.net/images/190327/i8sd8r4i.jpg

• Diese Antwort wurde geändert vor 5 Jahren von jostu55.

Wie erwartet, es klappt auch! Aber es ist vom Theme abhängig.

Ich habe es diemal mit dem Theme Twenty Nineteen gemacht. Das war gerade aktiv.
Seite angelegt, Code hinein kopiert, ansehen ;-( Kalender ist schmal, 420px, also wieder die Handy-Auflösung, da der Inline Platz nicht ausreicht.
Die Ursache mit dem (Firefox-)Browser-Entwicklertool (F12) suchen.
Auslöser bei diesem Theme in den CSS:

.entry .entry-content > *, .entry .entry-summary > * {
	max-width: calc(6 * (100vw / 12) - 28px);
}

Mit der Änderung des max-width: auf 100 % sieht es wieder aus wie gewünscht – quick and dirty, da auf unerwünschte Effekte nicht geprüft 😉

LINK

• Diese Antwort wurde geändert vor 5 Jahren von jostu55.

Tja – Divi mit Page Builder…. ggf mal hier reinschauen LINK oder hier eine Anleitung, wie man CSS Anpassen kann LINK
Sonst temporär die Seite veröffentlichen – wenn ich nicht selbst Zeit dafür habe wird sich irgendwer finden 😉

Auch der sollte mit CSS weg zu bekommen sein 😉