 Terminliste 01 (jahresübergreifend)
Das Script zeigt Termine und die bis dahin verbleibende Zeit in Tagen (zeilenweise) an. Der Abstand in Tagen wird berechnet. Lediglich aktuelle und in der Zukunft liegende Termine aus der Liste werden dargestellt. Ältere Termine werden ausgeblendet.
|
|
Terminliste, abgelaufene Termine werden ausgeblendet
UPDATE 11.07.2009 22:00 Uhr, Tagesdifferenz wird nun 4-stellig angezeigt
Die Ausgabe der angekündigten Termine erfolgt zeilenweise als Text der natürlich in CSS-Formatierungen eingefasst werden kann. Die Zieldaten zur Berechnung der Terminliste werden in einem Array  abgelegt! Termine können über den Jahreswechsel hinaus unbegrenzt eingetragen werden.
Anzeige: noch xxxx Tage bis + 1 Beschreibungstext (Ausgabe als Textstring)
Beispiel einer Ausgabe (Schulferien)
"Das Schönste an der Schule sind die Ferien" behaupten viele Schüler. Na ja, die Pausen sind doch auch nicht schlecht, oder? Habt ihr schon mal ausgerechnet wie lange ihr bis zu den nächsten Ferien noch warten müsst? Diese Arbeit hat euch der Computer abgenommen. Es dauert nicht mehr lange:
Grundlage für das Beispiel sind die Daten für NRW (hoffentlich stimmen die)
Schulferientermine finden sie unter: www.schulferien.org oder www.kalender-365.de
Aufgabe des Scripts
Ankündigung von Terminen, die dynamische Anzeige blendet abgelaufene Termine aus. Anzeige der Resttage (Tageszähler) plus Beschreibungstext.
Das Script soll anstehende Termine und die verbleibende Zeit in Tagen auf der Webseite anzeigen. Dabei soll die Webseite für einen längeren Zeitraum wartungsfrei bleiben und bereits verflossene Termine automatisiert nicht mehr anzeigt werden. Höchstens einmal jährlich sollte der Webmaster die neuen Eckdaten eintragen müssen. Als Beispiel für die praktische Anwendung habe ich die Ankündigung des ersten Ferientags (für eine Schulseite) genommen.
Die Darstellung der Tageszahl erfolgt immer dreistellig!
Ich habe die Ausgabe der Liste CSS-formatiert und in einer Monospace-Schrift festgelegt. Da die Zeichenbreite immer gleich ist, kommen die im JavaScript angewiesenen 'Füller' für ein-, zwei- drei- und vierstellige Tageszahlen zur Geltung. Der Unterschied zwischen 'Tag' und Tage' wird ebenfalls berücksichtigt.
Noch 0001 Tag bis zu den ...
Noch 0075 Tage bis zu den ...
Noch 0105 Tage bis zu den ...
Noch 0149 Tage bis zu den ...
schööööön ordentlich, wie Jupp Zupp es mag!
Die Liste als Array
In einem (Array ) werden für jeden Termin 2 Einträge abgelegt. Der Erste Eintrag ist jeweils das Datum in englischer Schreibweise, der zweite Eintrag die dazugehörige Beschreibung.
Termin = new Array()
Termin[Termin.length]="January 1, 2005"
Termin[Termin.length]="Neujahr 2005"
Termin[Termin.length]="March 17, 2008"
Termin[Termin.length]="Osterferien 2008"
Termin[Termin.length]="May 13, 2008"
Termin[Termin.length]="Pfingstferien 2008"
Termin[Termin.length]="June 26, 2008"
Termin[Termin.length]="Sommerferien 2008"
...
Die englische Schreibweise des Monatsnamens beachten (im Quelltext notiert)!
January, February, March, April, May, June,
July, August, September, October, November, December
Aufwand zum Einbau in ihre Seite
1) kopieren sie das Script in den Head-Bereich ihrer Seite (siehe Textdatei)
2) andern sie die Eintragungen im Array für ihre Liste
3) notieren sie den Aufruf im Body-Bereich ihrer Seite
4) testen sie die Anzeige mit unterschiedlichem Datum
Info einblenden
 Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'
Ort der Anzeige im Dokument
Der Aufruf der Funktion Ferientermine() zur Anzeige der Termine im Dokument erfolgt an der Stelle, wo die Liste erscheinen soll mit der Notierung
<script type="text/javascript" language="JavaScript">
<!-- Begin
Ferientermine();
// End -->
</script>
Formatierung der Anzeige
Absatz mit CSS-Klasse für die Textformatierung + farbigem Rand
<p class="Termintext">
<script type="text/javascript" language="JavaScript">
<!-- Begin
Ferientermine();
// End -->
</script>
</p>
CSS im Head:
<style type="text/css">
<!--
.Termintext {
font-family:monospace,sans-serif;
font-size:12px;
font-weight:normal;
color: #4F4F4F;
line-height:130%;
border:1px solid #FFB9C0;
padding:15px;
}
-->
</style>
oder mit Hintergrundgrafik:
<style type="text/css">
<!--
.Termintext {
font-family:monospace,sans-serif;
font-size:12px;
font-weight:normal;
color: #4F4F4F;
line-height:130%;
border:1px solid #FFB9C0;
padding:15px;
background:url(../images/bg-streifen.gif) #FFFFFF top left;
}
-->
</style>
|
Home • Datum • Terminliste Schulfereien
BEISPIEL