Interaktiver Kalender

Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Interaktiver Kalender

von Thomas Salvador.

Zum Abschluß der Betrachtungen von Datum und Zeit mit JavaScript noch ein Script, welches einen Kalender darstellt.

Was brauchen wir für einen Kalender?

Zum einen brauchen wir Steuerelemente. Wir beschränken uns dabei auf Elemente für vorheriges bzw. nächstes Jahr bzw. Monat. Diese Elemente fassen wir zu einem Formular "control" zusammen.

Zum anderen brauchen wir freilich Elemente, in denen wir den Kalender selbst darstellen. Wir verwenden auch hierfür Buttons, die wir in einer 6x7 Matrix anordnen. Um dies halbwegs ordentlich formatiert hinzubekommen, setzt man das Ganze einfach als Tabelle. Diese Tabelle umfassen wir mit einem Formular "cal".

Man macht sich leicht klar, dass man die Matrix selbst effektiv in JavaScript implementieren kann. Dies ist erheblich effizienter und zudem platzsparender, als sie direkt zu setzen.

Schließlich stellen wir "control" und "cal" mit Hilfe einer Tabelle übereinander, so dass wir ein recht hübsches Aussehen erreichen.

Gut, das implementieren wir erstmal:

Implementierung der Schnittstelle

Nach Meinung des Autors sollte man bei massiverem JavaScript-Einsatz Benutzer nicht JavaScript-fähiger Browser entsprechend informieren, damit sich diese nicht wundern, warum gar nichts funktioniert.

<noscript>
Ihr Browser unterst&uuml;tzt JavaScript nicht, oder die Unterst&uuml;tzung
ist abgeschaltet. So k&ouml;nnen Sie diesen Kalender leider nicht benutzen.
</noscript>

Nun eine Überschrift und die beide Formulare umfassende Tabelle:

<h2>Kalender</h2>

<table cellspacing="0" cellpadding="10">
  ...Zeile mit control-Formular...
  ...Zeile mit eigentlichem Kalender...
</table>

Zeile mit control-Formular

Das control-Formular können wir noch gut in reinem HTML ausdrücken:

<tr><td align="center">
<form name="control">
<input type=button value=" &lt;&lt;- " onClick="prevYear();" style="width:50px;">
<input type=button value=" &lt;-- " onClick="prevMonth();" style="width:50px;">
<input type=button name="t" value="XXXXXXXXXXX" onClick="info();" style="width:150px;">
<input type=button value=" --&gt; " onClick="nextMonth();" style="width:50px;">
<input type=button value=" -&gt;&gt; " onClick="nextYear();" style="width:50px;">
</form>

</td></tr>

Wir geben den Button mit einem einfachen CSS-Style eine gewisse Breite. Die X diesen dazu, dem mittleren Button auch dann ein Breite zu geben, wenn CSS nicht verfügbar ist.

Über onClick benennen wir die auszuführenden und noch zu implementierenden Operationen. Wir lagern diese in separate Funktionen aus.

Der mittlere Button hat als einziger einen Namen ist, weil wir seinen Wert anpassen und ihn unabhängig von seiner (relativen) Position machen wollen. Wir können ihn also immer mit document.control.t ansprechen, egal wo das Formular und wo der Button im Formular steht.

Zeile mit eigentlichem Kalender

Nun zum Kalender selbst: Dieser wird - wie schon erwähbt - als zweite Zeile der Tabelle gesetzt. Der Zelleninhalt ist ein Formular "cal", welches selbst eine Tabelle enthät. Diese Tabelle besteht aus einer Zeile mit Überschriften (Kurzformen für Tagesbezeichnung) und sechs Zeilen mit je sieben Buttons. Die Implementierung erfolgt naheliegend mit zwei geschachtelten for-Schleifen:

<script type="text/javascript"><!--

// Kopfzeile

  document.write('<tr><td align="center">');
  document.write('<form name="cal"><table>');
  document.write('<tr><th>Mon</th><th>Die</th>',
                '<th>Mit</th><th>Don</th>',
                '<th>Fre</th><th>Sam</th>',
                '<th><font color="#cc3333">',
                'Son</font></th></tr>');

// Matrix

    for (var y=1; y <= 6; y++) {
      document.write('<tr>');
      for (var x=1; x <= 7; x++) {
        document.write('<td>');
        document.write('<input type=button value="XXX" name="z', z, '" style="width:50px;">>');
        document.write('</td>');
      }
      document.write('</tr>');
    }

    document.write('</table></form>');
    document.write('</td></tr>');
  // -->
  </script>

Den schwersten Teil hätten wir damit schon abgehandelt. Die X dienen wieder dazu, eine gewisse Breite zu erzeugenm sofern der CSS-Style nicht ausgewertet wird. Wir kommen nun aber zum interessanteren Teil, der Implementierung der Funktionalität.

Teil 2

Interaktiver Kalender

Implementierung der Schnittstelle

Zeile mit control-Formular

Zeile mit eigentlichem Kalender

Verwandte Artikel und Seiten