google-Kalender formatieren (Iframe) - Kalenderalternativen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • google-Kalender formatieren (Iframe) - Kalenderalternativen

    Jetzt hat es mich erwischt!
    Das Thema "Kalender"

    Bin inzwischen bei einem öffentlichen google-Kalender gelandet.
    Soweit so gut - für den Kunden.

    Wie kann ich die Schriftart/Schriftgröße und Hintergrundfarbe des
    per iframe eingebunden Kalenders ändern? Google unterstützt das nicht.
    Schaut mal hier:
    Testseite

    ---

    Habe dann das gefunden:
    daffyforgafe.com/blog/stylingembeddedgooglecalendars
    Dort ist zwar alles beschrieben, aber ich komme nicht damit klar.

    ---
    Hat jemand das X5-Addon "Full Calendar" gekauft und damit Erfahrung?
    Musterseite?
    Kann dort der Link zum Google-Kalender (ics-Format) angegeben werden?
    Ist das ganze mit einer Deutschen Oberfläche?
    Eine "Agenda"-Übersichtliste (Auflistung der Termine) gibt es nicht?
    Sieht nicht so aus:
    answers.websitex5.com/objects/…1eb5-47a3-a13e-b6583a31d9

    --
    Der Kalender soll anhand der Google-Termine generiert werden. Die Standardansicht soll "Tabelle" sein, umschaltbar auf "Tag", "Woche" und "Monat"
    und auf das Kundenlayout (Schrift/Farbe) anpassbar sein.

    Wer kann helfen und(/oder hat so was schon mal realisiert?
    Danke für Eure Hilfe! Sal Guri

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von salguri ()

  • Hallo,


    habe mir inzwischen das Plugin Full Calendar von Incomedia gekauft.
    Lest mehr unter
    answers.websitex5.com/post/125268
    und in die Testseite (s.o) eingebaut

    Leider hilft mir das alles nichts.
    Lese jede Menge über die Formatierung (oder nicht) von Iframes: Ohne Lösung
    ggf. ein anders Modul was die XML Datei von google entsprechend aufbereitet?

    Ziel:
    Der Kalender soll anhand der Google-Termine generiert werden. Die Standardansicht soll "Tabelle" sein, umschaltbar auf "Tag", "Woche" und
    "Monat" und auf das Kundenlayout (Schrift/Farbe) anpassbar sein.
    Kurz; genau so wie es google anbietet - nur andere Formatierung

    Hat jemand eine Idee?
    Danke für Eure Hilfe! Sal Guri
  • Der Fullcalender von Inco kann nicht viel, im Prinzip nur die Daten einlesen. Stylisch ist da nichts !

    Beim Google Kalender kann man doch verschiedene Templates einstellen oder ?

    Wenn dann könnte man per CSS eingreifen und anpassen !
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !
  • Guter Tipp und geeignet Belegungen in einem Kalender anzuzeigen.

    Für meinen Fall soll es jedoch die Ansichten für Tag, Monat etc. geben, genau wie Google es vorgibt.
    Was mir fehlt ist NUR die Formatierung.
    Suche und suche und finde viel, bisher leider nicht das richtige dabei ...

    Jeder Tipp ist willkommen
    Danke für Eure Hilfe! Sal Guri
  • habe was gefunden:

    webdesignerdepot.com/2012/04/i…lendar-with-your-website/
    gut beschrieben, aber ich schaff es nicht das ganze in X5 einzubauen...
    schaut mal

    der erste von drei Kalendern
    - 1. Mein Versuch
    - 2. X5 Full Calendar
    - 3. Google Kalender mit iframe
    Danke für Eure Hilfe! Sal Guri

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von salguri ()

  • Die custom_calendar.php ist nicht vollständig falls du den Code direkt dort raus kopiert hast und ihn in deine termine.php Seite eingefügt hast. Denn erstere Seite ist nicht auf deinem Webspace. Die dortigen Daten hast du auch angepasst?



    PHP-Quellcode

    1. <?php
    2. $your_google_calendar="https://www.google.com/calendar/embed?src=kik01%40freenet.de";
    3. $url= parse_url($your_google_calendar);
    4. $google_domain = $url['scheme'].'://'.$url['host'].dirname($url['path']).'/';
    5. // Load and parse Google's raw calendar
    6. $dom = new DOMDocument;
    7. $dom->loadHTMLfile($your_google_calendar);
    8. // Create a link to a new CSS file called custom_calendar.css
    9. $element = $dom->createElement('link');
    10. $element->setAttribute('type', 'text/css');
    11. $element->setAttribute('rel', 'stylesheet');
    12. $element->setAttribute('href', 'custom_calendar.css');
    13. // Change Google's JS file to use absolute URLs
    14. $scripts = $dom->getElementsByTagName('script');
    15. foreach ($scripts as $script) {
    16. $js_src = $script->getAttribute('src');
    17. if ($js_src) {
    18. $parsed_js = parse_url($js_src, PHP_URL_HOST);
    19. if (!$parsed_js) {
    20. $script->setAttribute('src', $google_domain . $js_src);
    21. }
    22. }
    23. }
    24. // Append this link at the end of the element
    25. $head = $dom->getElementsByTagName('head')->item(0);
    26. $head->appendChild($element);
    27. // Remove old stylesheet
    28. $oldcss = $dom->documentElement;
    29. $link = $oldcss->getElementsByTagName('link')->item(0);
    30. $head->removeChild($link);
    31. // Export the HTML
    32. echo $dom->saveHTML();
    33. ?>
    Alles anzeigen
    :hi: :mario:
  • Ja, andy das ist in Arbeit.
    Nur:
    - wie starte ich den Kalender in der Terminübersicht-/Agenda-Ansicht?
    - wie ändere ich die Farbe der Pfeil-Symbole?
    - wie unterdrückt man den Namen des Kalenders?

    Bei einem Aufruf über Iframe geht das so:
    <iframe src="https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showCalendars=0&showTz=0&mode=AGENDA&
    height=400&wkst=1&bgcolor=%23ffffff&src=<username>.de&
    color=%23182C57&ctz=Europe%2FBerlin" style=" border:solid 1px #777 "
    width="850" height="600" frameborder="0" scrolling="no"></iframe>
    Danke für Eure Hilfe! Sal Guri
  • Punkt 1 und 3 müssten doch in der Kalenderverwaltung zum einstellen sein, oder ?

    Wenn nicht dann bei Punkt 3 in der CSS den Selektor #calendarTitle auf display:none stellen !

    Punkt 2 ist schwieriger da es in der custom_calendar.css beim Selektor .navBack und .NavForward gespeichert ist und auf eine Grafik bei GoogleKalender hinweist ! Da musst du halt die Grafik runterladen und einfärben und unter deinen Pfad einbinden !
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !
  • Punkt 2 und 3 wie Andy schreibt.

    in der CSS Datei siehst du

    z.b.

    background: url(//calendar.google.com/googlecalendar/images/combined_v22.png) -199px -52px;

    dort änderst du den Pfad zur Datei auf deinen Webserver
    background: url(images/combined_v22.png) -199px -52px;

    die Datei dann ans HTML Objekt mit dran gemacht.

    Nun kannst du entweder die Bilddatei bearbeiten in deinem jeweiligen Farbwunsch ODER du änderst die px Angaben auf den Pfeil der dir gefällt, ODER du änderst die Pfade so das du nur ein einzelnes kleines Bild hast und nicht das combined...denn das kommt mehrmals in der CSS vor nur halt mit anderen Positionsangaben.

    Auf der Testseite von mir solltest du sehen das ich andere Pfeile habe und der Titel ist nicht zu sehen und auch wird die Agenda gestartet.

    Punkt 1 - Füge einfach hinter die Url in der PHP Datei das hier mit rein (hinter die Email Adresse)

    &mode=AGENDA
    :hi: :mario:
  • Hallo zwoemti,

    doch, ich hatte das schon gesehen, dass die Schrift in Deiner Musterseite nicht korrekt war. ;)
    Lade ich Dein X5-Projekt und exportiere es ins WEB sind die Schriften da?!

    an alle:
    1.
    Scheint noch etwas anderes zu sein:
    Ruft man die Testseite (s.o.) von einen IPAD auf sind alle Texte im "geänderten Kalender" nicht in der MULI (Überschriften, Texte etc.)
    muss die Schriftart nochmals definiert werden?

    2.
    Womit kann ich am schnellsten und einfachsten die CSS- Anpassungen vornehmen?
    So etwa - leider nicht in diesem Fall
    skybound.ca/
    Danke für Eure Hilfe! Sal Guri