Man kann den iframe-Code des Google Kalenders direkt in das Content-DIV integrieren (im Skin Site.page). Dadurch wird der Kalender jedoch auf jeder Inhaltsseite angezeigt und ich bin nicht sicher, ob das wirklich wünschenswert ist:
Wollen Sie hingegen eine bedingte Darstellung realisieren (z.B. nur auf der Startseite, nicht aber auf Beitragsseiten), ist die Verwendung von JavaScript unumgänglich.
Klaener1 - 15. Dez. 2013, 23:56
Google Calendar einfügen
Danke für die schnelle Reaktion.
Sie haben Recht, ich möchte den Kalender nicht auf jeder Seite haben.
Ich dachte es mir eigentlich ganz einfach: Über ein "Free Text Field" einen kleinen Kalender in das Menü (notfalls als jpg ohne echte Kalender Funktion) und von dort auf einen Beitrag verlinken, der den Kalender enthält. Allerdings schaffe ich es nicht, den Google code in einen Beitrag einzubauen. Geht das?
@Klaener - das ist wie im richtigen Leben: die einfachsten Dinge können manchmal sehr aufwändig werden.
Wie skydance schon anmerkte, können iframe-Einbettungen nur in Skins, nicht aber in Beitragstexte integriert werden. Der Twoday-Editor filtert entsprechende Versuche sofort aus.
Ich möchte trotzdem noch eine Lösung anbieten, die sowohl das Sicherheitsbedürfnis von Twoday berücksichtigt, als auch Ihnen erlaubt, Ihren Kalender in einen beliebigen Beitrag einzubinden: dabei wird eine simple OBJECT-Einbettung (welche auch der Editor akzeptiert) bei der Seitenanzeige durch ein kleines jQuery-Script in einen validen Google-Calendar Aufruf umgesetzt. Führen Sie dazu folgende Schritte durch:
Aktivieren Sie die Twoday-Komponente jQuery. Klicken Sie auf Admin → Module → Extension Module und dort beim Eintrag "JQuery Integration" (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf "ja" (Sichern nicht vergessen).
Klicken Sie auf Admin → Layout → Vorlagen bearbeiten (HTML) und dann auf Hauptseite (Site.page). Navigieren Sie an das Ende der HTML-Anzeige und kopieren Sie direkt vor </body> folgendes Script:
<script type="text/javascript">
$(document).ready(function(){ "use strict";
$(".storyContent object.gcal").each( function(){
var self = $(this),
src = self.attr("data") || "",
width = self.attr("width") || "",
height = self.attr("height") || "",
html = "";
self.css("display","none");
if (width.length===0 || height.length===0 || src.length===0){
html = "<p class='message'>Fehler: Bitte überprüfen Sie die Object-Parameter 'data', 'width' und 'height'.</p>";
} else {
html = '<iframe src="https://www.google.com/calendar/embed?src='+src+'&ctz=Europe/Berlin" style="border: 0" width="'+width+'" height="'+height+'" frameborder="0" scrolling="no"></iframe>';
}
self.before(html);
});
});
</script>
Klicken Sie nach dem Einfügen auf "Speichern und Schließen". Legen Sie nun einen neuen Beitrag an. Geben Sie im Editor folgenden HTML-Befehl ein:
wobei {Kalenderquelle} die Adresse Ihres Kalenders aus dem Google-iframe-Code (hinter &src=...), {Breite} die anzuzeigende Kalenderbreite in Pixel und Höhe die entsprechende Höhe darstellt. Die Klassenangabe gcal ist fix. Ausgefüllt könnte die OBJECT-Anweisung also etwa so ausschauen: <object class="gcal" data="xxx_klaener%40gmail.com" width="500" height="375"></object>.
Vor oder nach dem OBJECT-Befehl können Sie nach Wunsch beliebige Texte oder andere HTML-Befehle einfügen.
Speichern Sie den Beitragstext und führen Sie einen Hard-Reload (Strg-F5) durch. In der Beitragsanzeige müsste nun Ihr Google-Kalender geladen und angezeigt werden.
<!-- content -->
<div id="content">
<% response.message prefix='<div class="message">' suffix='</div><br />' %>
<iframe src="https://www.google.com/calendar/embed?src=your.own.public.calendar.google.com&ctz=Europe/Berlin" style="border: 0" width="500" height="375" frameborder="0" scrolling="no"></iframe>
<% response.body %>
</div><!-- end of content -->
Wollen Sie hingegen eine bedingte Darstellung realisieren (z.B. nur auf der Startseite, nicht aber auf Beitragsseiten), ist die Verwendung von JavaScript unumgänglich.
Google Calendar einfügen
Sie haben Recht, ich möchte den Kalender nicht auf jeder Seite haben.
Ich dachte es mir eigentlich ganz einfach: Über ein "Free Text Field" einen kleinen Kalender in das Menü (notfalls als jpg ohne echte Kalender Funktion) und von dort auf einen Beitrag verlinken, der den Kalender enthält. Allerdings schaffe ich es nicht, den Google code in einen Beitrag einzubauen. Geht das?
Wie skydance schon anmerkte, können iframe-Einbettungen nur in Skins, nicht aber in Beitragstexte integriert werden. Der Twoday-Editor filtert entsprechende Versuche sofort aus.
Ich möchte trotzdem noch eine Lösung anbieten, die sowohl das Sicherheitsbedürfnis von Twoday berücksichtigt, als auch Ihnen erlaubt, Ihren Kalender in einen beliebigen Beitrag einzubinden: dabei wird eine simple OBJECT-Einbettung (welche auch der Editor akzeptiert) bei der Seitenanzeige durch ein kleines jQuery-Script in einen validen Google-Calendar Aufruf umgesetzt. Führen Sie dazu folgende Schritte durch:
<script type="text/javascript">
$(document).ready(function(){ "use strict";
$(".storyContent object.gcal").each( function(){
var self = $(this),
src = self.attr("data") || "",
width = self.attr("width") || "",
height = self.attr("height") || "",
html = "";
self.css("display","none");
if (width.length===0 || height.length===0 || src.length===0){
html = "<p class='message'>Fehler: Bitte überprüfen Sie die Object-Parameter 'data', 'width' und 'height'.</p>";
} else {
html = '<iframe src="https://www.google.com/calendar/embed?src='+src+'&ctz=Europe/Berlin" style="border: 0" width="'+width+'" height="'+height+'" frameborder="0" scrolling="no"></iframe>';
}
self.before(html);
});
});
</script>
<object class="gcal" data="{Kalenderquelle}" width="{Breite}" height="{Höhe}"></object>
wobei {Kalenderquelle} die Adresse Ihres Kalenders aus dem Google-iframe-Code (hinter &src=...), {Breite} die anzuzeigende Kalenderbreite in Pixel und Höhe die entsprechende Höhe darstellt. Die Klassenangabe gcal ist fix. Ausgefüllt könnte die OBJECT-Anweisung also etwa so ausschauen: <object class="gcal" data="xxx_klaener%40gmail.com" width="500" height="375"></object>.Viel Erfolg bei der Umsetzung!