Geburtstagskalender

Demo

Autor: Ich

www.friedels-home.de

IE 4 IE 5 IE 6
Opa 5 Opa 6 Opa 7 Opa 8
NN 2 NN 3 NN 4 NN 6 NN 7
Moz 1 FF 0 FF 1

Der Quellcode

Am einfachsten ist es wohl, wenn du dir die ganze Seite kopierst. Hier ist der Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
Friedels Geburtstagskalender</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<script type=text/javascript src="geb-kal1.js"></script>
<script type=text/javascript src="geb-kal2.js"></script>

<base target="_blank">
</head>

<body>

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

document.write("<p>Heute ist <b>"+WoTa+"</b>, der <b>"+Tag+"."+Monat+"."+Jahr+"</b>.</p>");
<!-- Heutige Geburtstage -->
heutegeb();
if (Anzheut>0) document.write("<hr>");

<!-- Geburtstage letzte 7 Tage -->
VergGeb(7);
if (AnzVerg>0) document.write("<hr>");

<!-- Geburtstage kommende 14 Tage -->
ZukGeb(14);
//-->
</script>

</body>
</html>

Die farbigen Markierungen im Quellcode habe ich eingefügt, damit du die folgenden Beschreibungen leichter zuordnen kannst.

Alles was grau hinterlegt ist, ist das Grundgerüst einer ganz normalen Htmlseite. Die teile, die in diesem Bereich rot geschrieben sind, kannst bzw. solltest du anpassen. In der ersten Zeile wird der Doctype angegeben. Das Script funktioniert auch in der Variante Strict. Wer sich mit Html nicht auskennt, sollte diese Zeile nicht ändern. Wer sich auskennt, wird selbst wissen welche Variante er verwenden will. Bei <titile> musst du den Seitentitel eintragen. <base target="_blank"> legt fest, dass Links auf dieser Seite normalerweise in einem neuen Fenster geöffnet werden. Wenn die verlinkten Seiten im selben Fenster statt der Kalenderseite angezeigt werden sollen, kannst du die Zeile weglassen.

Diese beiden Zeilen laden die beiden Script-Dateien. Du musst sie downloaden und im selben Ordner speichern, wie die Kalenderseite. Um die Dateien down zu loaden, musst du die folgenden Links mit der rechten Maustaste anklicken und im Kontextmenü "Ziel speichern unter ..." (oder ähnlich - je nach Browser) wählen.

Speichere die beiden Dateien am besten unter den Namen geb-kal1.js und geb-kal2.js. geb-kal1.js enthält die Namen, Geburtstage und Links der Personen, die im Kalender eingetragen sind. Diese Daten musst du natürlich noch anpassen, wenn du andere Personen anzeigen willst als jetzt eingetragen sind. Das wird noch beschrieben. geb-kal2.js enthält die Funktionen des Kalenders. Hier brauchst du nichts zu ändern.

Im Body ist ein Scriptbereich. Hier gibt es nichts zu verändern.

Durch diese Zeile wird der Text "Heute ist" und das aktuelle Datum erzeugt. Auch hier brauchst du nichts an zu passen.

Hier werden die Geburtstage für den heutigen Tag angezeigt. Die zweite Zeile erzeugt darunter eine waagerechte Linie falls mindestens ein Geburtstag angezeigt wurde. Wenn am aktuellen Tag niemand Geburtstag hat wird auch keine Linie angezeigt. Hier brauchst du nichts zu ändern.

Hier werden die Geburtstage angezeigt, die in der Vergangenheit liegen. Die Zahl in der Klammer bei VergGeb(7); gibt an, wie viele Tage ab dem aktuellen Datum in der Vergangenheit dargestellt werden sollen. Diesen Wert kannst du nach Belieben anpassen. Natürlich darf hier nur eine positive ganze Zahl stehen. Die zweite Zeile erzeugt darunter eine waagerechte Linie falls mindestens ein Geburtstag angezeigt wurde.

Hier werden die Geburtstage angezeigt, die in der Zukunft liegen. Die Zahl in der Klammer bei ZukGeb(14); gibt an, wie viele Tage ab dem aktuellen Datum in der Zukunft dargestellt werden sollen. Auch diesen Wert kannst du nach Belieben anpassen.

Die Liste der Namen, Geburtstage und Links

Wie ich schon geschrieben habe, brauchst du 2 Scriptdateien namens geb-kal1.js und geb-kal2.js. Öffne die geb-kal1.js mit einem Texteditor. (Das ist etwas anderes als ein Textverarbeitungsprogramm. Microsoft Word ist kein Texteditor!). Dafür kannst du den Editor aus dem Zubehör von Windows (Notepad) verwenden.

Du wirst feststellen, dass darin zuerst die folgenden 3 Zeilen stehen.

var wer = new Array();
var gtag = new Array();
var site = new Array();

Daran darfst du nichts ändern.

Darunter kommt für jeden Geburtstag ein Block aus 3 weiteren Zeilen. Jede dieser Zeilen hat links vom Istgleich-Zeichen einen Variablennamen,der eine Nummer enthält. Diese Nummer muss in jeder der 3 Zeilen eines Blocks gleich sein. Die Nummern müssen fortlaufend ohne Unterbrechung sein. Keine Nummer darf in 2 Blöcken vorkommen.

Rechts vom Istgleich-Zeichen steht in der ersten Zeile der Name des Geburtstagskindes. Er steht in Anführungszeichen und darf selbst keine Anführungszeichen enthalten. Wenn der Name Anführungszeichen enthalten soll, muss man sie durch &quot; ersetzen. Alle anderen Zeichen, die man auf einer deutschen Tastatur findet (und viele andere) können ganz normal verwendet werden. Zeichen, die nicht auf den Seiten codetable001.htm und codetable002.htm vorkommen, müssen durch Unicode oder anders maskiert werden.

In der 2. Zeile steht das Geburtsdatum. Hier müssen zuerst der Tag mit 2 Ziffern angegeben werden, dann kommt ein beliebiges Zeichen. Dann folgen 2 Ziffen für den Monat. Dann kommt wieder ein beliebiges Zeichen. Danach kann eine Zahl für das Geburtsjahr folgen. Es sind beliebige Zahlen möglich, auch nagative für Geburtsjahre vor unserer Zeitrechnung. Wenn Das Alter nicht angegeben werden soll, kann hier beliebiger Text eingetragen werden, der nicht mit einer Ziffer anfangen darf und auch nicht mit einem Vorzeichen, dem eine Ziffer folgt. In diesem Fall kann also einfach ein x oder ein anderer Buchstabe eingetragen werden, aber es muss mindestens ein Zeichen eingetragen werden.

Hier ein paar Beispiele für das Datum:

Wenn ein Link zu einer Website eingebaut werden soll, wird bei site die Adresse dazu eingegeben. Die Adresse kann mit einem relativen Pfad oder als absolute Adresse eingegeben werden. Wenn hier also z.B. site[ ] = "seite.htm"; steht, muss die Seite namens seite.htm im selben Ordner sein, wie die Seite mit dem Kalender. Bei Seiten, die außerhalb der eigenen Homepage liegen, muss man die ganze Adresse inclusive dem Protokoll angeben. Für meine Homepage müsste dort also site[ ] = "http://www.friedels-home.de/"; stehen. Wenn kein Link verwendet werden soll, muss site[ ] = "-"; eingetragen werden. Die Variable darf auf keinen Fall weggelasen werden. Natürlich müssen bei den vorangegangenen Beispielen die Nummern in den eckigen Klammern eingesetzt werden.

Achte darauf, dass die Dateinamenserweiterung bei Speichern nicht verändert wird. Einige Texteditoren speichern grundsätzlich mit der Endung .txt ab. In dem Fall muss die Datei umbenannt werden.


Wie das ganze funktioniert beschreibe ich im Kapitel Funktionsbeschreibung. WEnn du den Kalender einfach nur verwenden willst und dich nicht dafür interessierst, wie er funktioniert, brauchst du das nicht zu lesen.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: