Kalender per jsonP in die eigene Webseite

Für das freie Kalenderprojekt GriCal schrieb ich ein kleines Script in jQuery. Es ermöglicht Webmastern, mit geringem Aufwand einen Überblick der anstehenden Termine auf ihrer Webseite anzuzeigen.

Die Daten gehen nicht über den eigenen Webserver, sondern werden vom Browser direkt beim Kalenderprojekt angefordert. Dies geschieht mit jsonP und nicht mit Frames oder iFrames. jsonP ist ein Format für Arrays, die in ausführbarem Code eingebettet sind. Es ist sehr viel schlanker und vielseitiger als HTML, außerdem lässt es sich über Domains hinweg vom Browser laden.


Nächste Events

Powered by GriCal

Die Funktion getJSON() holt die Daten im Format jsonP, in diesem Fall mit der Anfrage nach Terminen in Berlin. Anschließend werden mit each() alle erhaltenen Elemente des Arrays mit HTML verpackt und in das vorbereitete DIV-Element #calendar geschrieben:

<script type="text/javascript">
function gridcalendar() {
  $('#gridcalendar div.gridcalendarEvent').remove();
  $('#gridcalendar p:last').remove();
  var url = 'http://dev.grical.org/s/?query='+
    encodeURIComponent($('#gridcalendar input').val())+
    '&view=json&limit=6&jsonp=?';
  $.getJSON(url,
    function(data) {
    $.each(data, function(key, val) {
      var datefields = val.fields.start.split('-');
      $('#gridcalendar').append(
        '<div class="gridcalendarEvent">'+
          '<div class="gridcalendarDate">Start: '+
          (datefields[2]*1)+'. '+(datefields[1]*1)+'. '+
          datefields[0]+
          '</div>'+
          '<div class="gridcalendarTitle">'+
          '<a href="https://www.grical.org/e/show/'+val.pk+'/">'+
          val.fields.title+'</a>'+
          '</div></div>'
      );
    });
    if (data.length<1)
        $('#gridcalendar').append(
        '<div class="gridcalendarEvent">'+
          '<div class="gridcalendarTitle">'+
          'Kein Event gefunden.'+
          '</div></div>'
      );
    $('#gridcalendar').append('<p>Powered by '+
       '<a href="http://www.grical.org/">GriCal</a></p>');
  });
}

jQuery(document).ready(function($){
  gridcalendar();
  $('#gridcalendar input').change(function() {
    gridcalendar();
  });
});
</script>

<div id="gridcalendar"><p>
  <!-- <a href="http://www.grical.org/s/?query=%40berlin">Nächste
  Events in Berlin</a> -->
  Nächste Events
  <input type="text" size="30" value="@Berlin" />
  </p>
  <p>Powered by <a href="http://www.grical.org/">GriCal</a></p>
</div>

Mit diesem Script kann ein Webmaster leicht einen Kalender in seine Seite binden, ohne serverseitig irgend etwas verarbeiten zu müssen. Notwendig ist dafür allerdings Vertrauen in das Kalenderprojekt. Schließlich werden Userdaten direkt zu GriCal gesendet. Außerdem würde eine hohe Auslastung bei GriCal dazu führen, dass diese Ansicht langsam geladen wird. Besser, aber auch etwas aufwändiger als dieser Ansatz ist deshalb ein serverseitiger Proxy, wie ich ihn im Artikel Twitter Updates auf der eigenen Webseite beschrieben habe.

1 thought on “Kalender per jsonP in die eigene Webseite”

Leave a Comment