Support » Allgemeine Fragen » Onlinekalender auf komplette Seitenjänge per iframe einbinden

  • Gelöst nightmanii

    (@nightmanii)


    Hallo,

    ich möchte meinen Onlinekalander von Microsoft auf meiner Homepage einbinden. Dafür ein ein iFrame angeboten:

    <iframe src=’https://outlook.office365.com/owa/calendar/Kalender@finanzberatung-albert.de/bookings/&#8216; width=’100%‘ height=’100%‘ scrolling=’yes‘ style=’border:0′></iframe>

    Wenn ich diesen einbinde wird aber auf der Seite gerade mal 30% der kompletten Breite verwendet. Öffnen ich aber den Originallink wird die komplette seite verwendet.

    Breite und Höhe steht ja schon auf 100%. Was mache ich falsch ?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • 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?!

    Hallo, ja wenn du den link öffnest ja. Wenn du aber den Iframe auf einer Webseite in WordPress einbindest ist der Kalender sehr schmal und lang.

    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 1 Jahr, 4 Monaten von jostu55.
    • Diese Antwort wurde geändert vor 1 Jahr, 4 Monaten von jostu55.

    Hallo, die Unterseite ist noch nicht Online – besteht nur als Entwurf.

    Ich habe keine Sidebar etc. sondern es steht die volle Breite zur Verfügung. Was muss ich nun ändern bei dem Code ?

    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!!

    Hallo, gerade probiert und es sieht nicht anders aus wie mit dem Code von Microsoft. Also bei dir sieht es jetzt auf einer Unterseite so aus, als wenn du den Link:
    https://outlook.office365.com/owa/calendar/Kalender@finanzberatung-albert.de/bookings/

    anklickst.

    Wenn ja wie hast du den Code auf der Unterseite in WordPress eingegeben?

    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 1 Jahr, 4 Monaten von jostu55.

    Dann liegt es vielleicht an meinem vorgehen. Ich habe eine komplett neue Seite erstellt und dann nur den Code eingetragen. Du schreibst aber, dass du einen Beitrag erstellt hast. Was ist wenn du eine Seite erstellst ?

    Danke übrigens für deine Hilfe

    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 1 Jahr, 4 Monaten von jostu55.

    Hmm ok, ich verwende das Theme Divi habe ich nicht soviel Plan von dem ganzen. Was schlägst du vor was ich tun kann damit es bei mir auch geht

    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 😉

    Hallo,

    Danke habe es hinbekommen. Jetzt sieht er so aus wie im Original. Einzige der graue Rand um den Kalender stört noch etwas

    Auch der sollte mit CSS weg zu bekommen sein 😉

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Das Thema „Onlinekalender auf komplette Seitenjänge per iframe einbinden“ ist für neue Antworten geschlossen.