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-2

Teil 1

In Teil 1 hatten wir die Darstellungroutinen und sozusagen die zugrundeliegenden Architektur besprochen. Kommen wir nun zur...

Implementierung der Funktionalität

Wir werden in globalen Variablen month und year den jeweils gerade angezeigten Kalender halten. Um den aktuellen Tag besonders hervorzuheben, halten wir in globalen Variablen nday, nmonth und nyear das jeweils aktuelle Datum. Diese machen wir dem System erstmal mit irgendwelche Werten initialisiert bekannt:

var nday = 10;
var nmonth = 4;
var nyear = 1999;
var month = 4;
var year  = 1999;

Zur Initialisierung, d.h. zum erstmaligen Ausfüllen des Kalenders, stellen wir das aktuelle Datum fest, setzen die Werte entsprechend und zeichnen den Kalender:

function init() {
  var act = new Date();

  month = act.getMonth()+1;
  year = act.getYear();
  if (year < 1000)
    year += 1900;

  nmonth = month;
  nyear = year;
  nday = act.getDate();

  update();
}

Diese Funktion lassen wir durch den onLoad-Handler von <body%gt; automatisch ausführen, wenn die Seite geladen ist. - nichts Neues:

<body OnLoad="init();">

Die Implementierung der Steuerelemente ist naheliegend. Je nachdem was angeklickt wurde, werden die Werte month und year angepasst und dann der Kalender neu gezeichnet:

function prevMonth() {
  if (--month == 0) {
    month = 12;
    year--;
  }
  update();
}

function nextMonth() {
  if (++month == 13) {
    month = 1;
    year++;
  }
  update();
}

function prevYear() {
  year--;
  update();
}

function nextYear() {
  year++;
  update();
}

In dem mittleren Feld t der Steuerung wollen wir eine natürlichsprachliche Darstellung von Monat und Jahr sehen. Darüber hinaus haben wir diesen Button mit der Funktion info() belegt, die lediglich ein Meldung ausgeben soll. Wir brauchen also die Monatsnamen, die wir schon kennengelernt hatten und die Funktion info():

var monNames = new Array('Januar', 'Februar', 'Maerz', 'April',
                         'Mai', 'Juni', 'Juli', 'August',
                         'September', 'Oktober', 'November', 'Dezember');

  function info() {
    alert('\nKalender v1.0\n\nin JavaScript\n\n',
          '(c) 1999, Thomas Salvador, Freeware.\n',
          'http://www.brauchbar.de\n\n',
          'Sie koennen das unveraenderte Script',
          'nach Belieben verwenden.');
  }

Tatsächlich fehlt jetzt nur noch die Funktion update(), die den Kalender in die Buttons zaubert. Diese stützt sich auf das Julianische Datum ab. So sind wir nicht auf den in JavaScript gegebenen Datumsbereich beschränkt und können (trotzdem) leicht mit Daten rechnen.

Wir hatten den Buttons keine Namen gegeben, da wir sie in Ihrer Reihenfolge ansprechen: Mit document.cal.elements[i] können wir auf das i-te Element (hier den i-ten Button) zugreifen. Auch dieses Feld ist zero-based. Fangen wir an: Wir machen verwendete Variablen bekannt:

function update() {
  var x = 0;
  var y = 0;
  var l = 0;
  var i = 0;

Nun melden wir im t-Feld, dass etwas passiert und löschen der Einfachheit halber alle Buttons des aktuellen Kalenders:

  document.control.t.value = 'Einen Moment bitte...';

  for (x = 0; x < 42; x++)
    document.cal['z'+x].value=' ';

Wir müssen wissen, wieviele Tage der darzustellende Monat hat und auf welchen Wochentag der 1. dieses Monats fällt. Beides ist mit dem Julianischen Datum trivial machbar.

  x = ymd2julian(year, month, 1);
  l = ymd2julian(year, month+1, 1)-x;

  x = (x % 7);

Zunächst hat x das julianische Datum des 1. Tag des dargestellten Monats. In einem zweiten Schritt wird l die Differenz von Julianischen Datum des 1. des Folge monats und x zugewiesen. Aufgrund der Linearität des Julianischen Datums (haben wir heute das Julianische Datum a, so haben wir mogen a+1, übermorgen a+2, usw.) trägt l damit die Anzahl der Tage des darzustellen Monats.

In einem finalen Schritt wird x der Wert x modulo 7 zugewiesen, wodurch wir den Wochentag ermitteln. Manche Leser werden hier einen Unterschied in der Berechnung zur Tag der Woche-Funktion bemerken. Dieser ist dadurch begründet, dass wir in dem genannten Artikel allgemein verwendbare Funktion kreieren wollten, die möglichst einfach verwendet werden kann. Der Unterschied bewirkt lediglich eine Änderung Bedeutung der gelieferten Werte von 0 bis 6. Hier wurde diese Version verwendet, da nur es eine interne, nicht zur Wiederverwendung gedachte Funktion ist.

Jetzt füllen wir den Kalender in einer einfachen for-Schleife über die Anzahl der Tage l:

  for (i = 1; i <= l; i++)
    document.cal['z'+(x+i-1)].value=' '+i;

Die folgende if-then-Unterscheidung hebt den aktuellen Tag hervor, wenn er im jeweils angezeigten Monatsblatt dargestellt ist:

  if ((year == nyear) && (month == nmonth))
    document.cal.elements[x+nday-1].value = '{'+nday+'}';

Schließlich tragen wir noch die natürlichsprachliche Bezeichnung des Kalenderblattes ein:

  document.control.t.value = monNames[month-1]+' '+year;
}

Fertig!

Kalender ausprobieren

zu Teil 1

interaktiver Kalender-2

Implementierung der Funktionalität

Verwandte Artikel und Seiten