Google Calendar einfügen
Hi,
ich möchte einen Google Kalender in meinen Blog einbauen.
Es gelingt mir, einen kleinen Google Calendar in meine rechte Menüleiste hinzuzufügen (über Free Text Module), aber ich hätte diesen Kalender lieber im Content Block.
Wie geht das? Hat jemand schon Google Calendar in einen Blog eingebaut?
danke
ich möchte einen Google Kalender in meinen Blog einbauen.
Es gelingt mir, einen kleinen Google Calendar in meine rechte Menüleiste hinzuzufügen (über Free Text Module), aber ich hätte diesen Kalender lieber im Content Block.
Wie geht das? Hat jemand schon Google Calendar in einen Blog eingebaut?
danke
Klaener1 - 15. Dez. 2013, 10:42 - Rubrik: externe Scripts und Gadgets
<!-- 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!