 Terminliste 10 jahresübergreifend mit Grafik
Das Script zeigt Termine in einer Tabelle an. Der Abstand in Tagen verbleibend wird berechnet und angezeigt. Das Datum (Tag Monat Jahr) wird auf einem Kalenderblatt angezeigt. Ein Beschreibungstext wird angezeigt. Alte Termine werden automatisch ausgeblendet. Datenablage in externer JS-Datei.
|
|
Liste der Termine jahresübergreifend - Kalenderblatt + Tagescounter + Text
Eine Kombination meiner Beispiele  Terminliste 06 und Mini-Kalenderblatt 1A
Darstellung in einer dreispaltigen Tabelle, Schema der Anzeige:
- Auf einer farbigen Grafik eines Mini-Kalenderblatts werden
Tag, Monat und Jahr dargestellt.
- Verbleibende Tage bis zum Termin werden daneben angezeigt:
heute, morgen, in xx Tagen + Datum
- In Spalte 3 wird der Text zum Termin angezeigt.
aktives Beispiel eine dynamischen Terminliste (Breite 500 Pixel)
Eine statische Terminliste finden sie unter Kalenderblatt 01B
Die Daten der Termine werden in einer externen JS-Datei abgelegt! Das erlaubt den Mehrfachzugriff auf diesen Datenbestand. Außerdem können, abhängig von den gesetzten Parametern beim Funktionsaufruf, unterschiedlich lange Listen erzeugt werden. Zum Beispiel lediglich 4 Termine auf der Startseite oder eine Liste aller Termine auf einer anderen Seite.
Die bei der Darstellung verwendete Grafik können sie (farblich passend) im Script festlegen. Ordnen sie der Variablen 'Hintergrund' die entsprechende Grafik zu.
Ebenso kann die Anzahl der zu listenden Termine definiert werden (hier 4). Tragen sie den Wert bei der Variablen 'WieViele' ein.
|
   
25 Grafiken finden sie in meiner
 MINI-IMAGE-BOX 
Menü: Web-Toolbox-Grafiken
|
// entsprechende Grafik für das Minikalenderblatt eintragen
var Hintergrund = "minikal14.gif";
// Vorgabe für Anzahl der zu listenden Termine
var WieViele = 4;
Erklärungen
Dieses Anwendungsbeispiel habe ich aus Code-Segmenten von zwei älteren Beispielen entwickelt. Nähere Erklärungen zur Funktion und Arbeitsweise können sie den entsprechenden Seiten entnehmen: Terminliste 06 und Mini-Kalenderblatt 1A
Die einzelnen Termine mit Datum und Beschreibungstext sind in einer externen Javascript-Datei ausgelagert. Die Termine tragen sie nach diesem Schema ein:
/*
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July,
August, September, October, November, December
*/
Termin = new Array()
Termin[Termin.length]='January 1, 2010';
Termin[Termin.length]='SWR Big Band Mainz';
Termin[Termin.length]='June 25, 2010';
Termin[Termin.length]='TUI Arena, Hannover';
Termin[Termin.length]='July 30, 2011';
Termin[Termin.length]='Campushalle, Flensburg,';
Termin[Termin.length]='December 8, 2012';
Termin[Termin.length]='Jazzclub Ettlingen';
Auf diese externe JS-Datei wird im Head-Bereich verwiesen mit:
<script type="text/javascript" language="JavaScript" src="termine10.js">
Aufruf der Funktion im Body:
<script type="text/javascript" language="JavaScript">
<!-- Begin
Terminliste10();
// End -->
</script>
Aufwand
1) Verweis auf externe JS-Datei im Head-Bereich eintragen
2) Funktion in den Head-Bereich kopieren
3) Aufruf der Funktion in den Body-Bereich eintragen
4) evtl. Grafik anpassen
5) evtl. Anzahl der Termine anpassen
6) Termine in der externen JS-Datei anpassen
 JavaScript in ein HTML-Dokument 'einbauen'
|
Home • Datum • Terminliste mit Grafik
Download