Information & Consulting

Hauptsächlich für die Konto-Verwaltung auf dem Vereinsrechner habe ich nach einem kleinen Kalender in JavaScript gesucht, mit dem wir die Eingabe von Daten erleichtern können. Bei der Suche bin ich auf einige fette Kalender, teilweise innerhalb von größeren JavaScript-Frameworks gestoßen, aber auch auf den kleinen Kalender von Oliver Bryant. Der ist schick, schnell und läßt sich leicht in die Seiten integrieren.

Natürlich hat er auch so seine Nachteile, von Hause aus poppt er nämlich auf, sobald das passende Eingabefeld den Fokus erhält, was etwas nervig ist, wenn man das Datum eigentlich manuell eintippen möchte. Das mußte also zuerst einmal geändert werden. Die neue Funktion »popcalendar(id)« kann man via »onclick« an jedes Element binden und die ID des zugehörigen Eingabefelds übergeben.

Bei näherer Betrachtung sind mir gleich weitere Dinge aufgefallen, die fehlen. Es gibt kein Close-Icon in der Kopfzeile. Wenn man abbrechen möchte, muß man nur außerhalb des Kalenders klicken. Nur bedingt intuitiv. Daher ist optional ein Close-Button im Kopf hinzugekommen.

Der Kalender erlaubt es zudem nicht, ein Datum in der Vergangenheit auszuwählen. Das ist für unseren Fall relativ unpraktisch, denn die Aktivitäten auf dem Konto finden fast immer in der Vergangenheit statt. Die Ursache hierfür zu finden, war etwas hakelig, aber nun läßt sich leicht konfigurieren, ob Daten in der Vergangenheit zugelassen werden oder nicht.

Im Deutschen schreiben wir das Datum als »1.9.2008« und nicht mit Schrägstrichen. Das ist nun auch konfigurierbar. Die Berechnung von Schaltjahren ist ebenfalls korrigiert. Für den Fall, daß die Grafiken in einem anderen Pfad als die aktuelle Seite liegen - was bei der Integration auf verschiedenen Unterseiten natürlich der Fall ist - läßt sich dieser Pfad nun auch konfigurieren.

In Deutschland beginnt eine Woche immer mit dem Montag und nicht wie in Amerika mit Sonntag. Es wäre schön, wenn der Kalender die Wochen auch genauso darstellen könnte. Die Berechnungsvorschrift dazu ist etwas trickreich, jetzt kann man jedoch den Wochenbeginn ebenfalls konfigurieren. Als Bonus kann man die Woche sogar mit Freitag beginnen lassen.

Der stark verbesserte Kalender wird leicht in bestehende Seiten eingebunden:

   <script type="text/javascript" src="../../calendar.js"></script>
   <script type="text/javascript">
   caldays = new Array('S','M','D','M','D','F','S');
   mn = new Array('Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez');
   var opts ={past: true,
              startat: 1,
              close: true,
              delim: '.',
              imgpath: '../../pix/'};
   calendar(opts);
   </script>

   <b>New date:</b> <input name="date" id="date" size="10">
   <img class="calendar" src="../../pix/calendar.gif" onclick="event.cancelBubble=true;popcalendar('date');">

Die Anfangsbuchstaben der Wochentage und die Kurznamen der Monate lassen sich ebenfalls den lokalen Gegebenheiten anpassen. Dadurch wird der nun Kalender erheblich angenehmer in lokalisierten Umgebungen, die nicht in Amerika liegen. Die Unterschiede zum ursprünglichen Kalender sind zwar etwas größer, doch ist der Kalender erheblich verbessert.