Kategorien
JavaScript & jQuery Programmierung

Calendario für jQuery ermöglicht die flexible Darstellung responsiver Kalender

Will man Termine auf einer Website veröffentlichen, bietet es sich an, diese in einem Kalender darzustellen. Das jQuery-Plugin Calendario bindet ohne viel Aufwand einen Monatskalender in eine Website ein und lässt sich nach Bedarf anpassen. Termine für den Kalender werden bequem per JavaScript übergeben und im Kalender angezeigt.


Kalenderdarstellung mit Calendario

Los geht’s mit einem leeren Container und einer Zeile JavaScript

Um den Kalender per Calendario in seiner Minimalausstattung einbinden zu zu können, braucht es einen leeren DIV-Container, der als Platzhalter für den Kalender dient:

<div id="kalender" class="fc-calendar-container"></div>

Über die ID wird das jQuery-Plugin auf den Container angewendet, welches dafür sorgt, dass dem Element der Kalender-Quelltext – eine Reihe von DIV- und SPAN-Elementen zur Darstellung der Wochen- und Monatstage – zugewiesen wird:

$("#kalender" ).calendario();

Das Layout des Kalenders passt man bequem per CSS an. Über die Klasse „fc-calendar-container“ erhält der Kalender das Standard-Layout, welches leicht änderbar ist.

Mehrere Optionen, über den Plugin-Aufruf einzustellen, erlauben das Anpassen des Kalenders. So können Monat und Jahr des Kalenderblattes angegeben werden (standardmäßig sind aktueller Monat und aktuelles Jahr dargestellt):

$("#kalender" ).calendario({
  month: 3,
  year: 2014
});

Im Beispiel wird der März 2014 angezeigt. Auch die Bezeichnungen der Wochentage und Monate lassen sich verändern – und zwar über zwei Arrays:

$("#kalender" ).calendario({
  weeks: ["Sonntag", "Montag", …],
  months: ["Januar", "Februar", …]
});

Da ein Kalender ohne Termine auf einer Website eher uninteressant ist, gibt es die Möglichkeit, über eine Variable eine Liste mit Terminen zu übergeben. Diese werden dann automatisch am richtigen Tag im Kalender dargestellt:

$("#kalender" ).calendario({
  caldata = {
    "12-31-2012": "Silvester",
    "01-01-2013": "Neujahr"
});

Listendarstellung für kleine Auflösungen

Typischerweise wird ein Kalender in sieben Spalten (pro Wochentag eine) angezeigt. Gerade bei kleinen Auflösungen wird es da schon mal eng. Calendario kommt mit einem responsiven Layout daher, welches die typische Darstellung in Spalten bei kleinen Auflösungen in eine einfache Listendarstellung ändert. Das heißt, die Tage werden alle untereinander angeordnet und erhalten den dazugehörigen Wochentag.


Listendarstellung für kleine Auflösungen

Fazit: Mit geringem Aufwand wird mit dem Calendario-Plugin ein vorzeigbarer Kalender, der sehr individuell anpassbar ist, in eine Website angebunden. Seine responsive Ausrichtung macht ihn tauglich für mobil orientierte Dienste.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Eine Antwort auf „Calendario für jQuery ermöglicht die flexible Darstellung responsiver Kalender“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.