 Terminliste 08 - Termine ankündigen (jahresübergreifend)
Das Script zeigt Termine in einer Tabelle an. Angezeigt werden: Das Datum für den Termin (Tag Monat Jahr), die bis zum Termin verbleibende (oder verstrichene) Zeit in Tagen, ein Beschreibungstext und eine zugehörige Grafik.
|
|
Liste der Termine mit Grafik - jahresübergreifend
Vielseitig einsetzbare Terminliste mit der Anzeige des Datums und einer zugeordneten Grafik. Berechnung des Tagesabstandes und Anzeige (Tagescounter). Sehr gut verwndbar z.B. für eine Vereinsseite die mehrere Unterabteilungen verschiedener Sportarten hat. Hier kann der Termin durch ein Symbol gekennzeichnet werden.
Datum, Beschreibung und Grafik für die Termine werden in einem Array  abgelegt!
Das Script entnimmt die Einträge aus dem Array, berechnet die Datumsinformationen und schreibt die Tabelle für eine geordnete Anzeige der Infos.
In der Beispiel-Terminliste unten sollen die zugehörigen Grafiken als Eyecatcher dienen und für die Mitglieder der Unterabteilungen die (für sie) wichtigen Termine hervorheben.
Das wäre ein möglicher Einsatzbereich für das Script. Überall dort, wo Termine und zeitlicher Abstand in Tagen in Verbindung mit Fotos oder Grafiken dargestellt werden sollen, kann man dieses Anwendungsbeispiel verwenden. Klicken Sie oben auf 'Demo 03'.
Schema der Anzeige:
Termine Spiel- und Sportgemeinschaft Geilenkirchen
Einsatzbereiche
Anwendung als:
| Liste Schultermine |
Sprechtage, Schulfrei, Zeugnisausgabe, Einschulungsfeier, ...
|
| Liste Vereinstermine |
Vorstandssitzungen, Jugendausflug, Jahresabschluss, ...
|
| pers. Terminliste |
Geburtstage, Müllabfuhr, Zahnarzt, TüV, Steuer, ...
|
Aufgabe des Scripts
Das Script soll anstehende Termine und neben dem Datum die verbleibende Zeit in Tagen auf der Webseite (oder auf ihrer Browserstartseite) anzeigen. Zur Hervorhebung wird jedem Termin eine Grafik zugeordnet. Dabei kann es sich, abhängig vom Einsatzbereich, um Symbole oder Fotos handeln. Die Liste können sie natürlich nach Geschmack und Layout anpassen.
Die Termineinträge als Array
(Notierung im JavaScript)
In einem Array werden für jeden Termin 3 Einträge abgelegt. Der erste Eintrag ist jeweils das Datum in englischer Schreibweise, der zweite Eintrag die dazugehörige Beschreibung, der dritte Eintrag ist die URL für die Grafik (gegebenenfalls mit Pfadangabe).
Ich habe diese Form der Notierung (mit laufender Nummer der Array-Elemente) gewählt, weil sie am Wenigsten fehlerträchtig ist und Sie zusammen gehörende Elemente leichter erkennen können.
Datum[0] = "January 1, 2008";
Beschreibung[0] = "Abt. Fußball Jugendausflug";
Grafik[0] = "grafiken/sport-01.gif";
Datum[1] = "February 1, 2009";
Beschreibung[1] = "Abt. Fußball Dorfturnier";
Grafik[1] = "grafiken/sport-01.gif";
var now = new Date();
Datum[2] = "March 1, 2010";
Beschreibung[2] = "Abt. Golf Grillfest";
Grafik[2] = "grafiken/sport-02.gif";
...
Englische Schreibweise des Monatsnamens beachten (Liste 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) kopieren sie die CSS-Notierungen in den Head-Bereich ihrer Seite (siehe Textdatei)
3) notieren sie den Aufruf im Body-Bereich ihrer Seite
4) ändern sie die Eintragungen im Array für ihre Liste
5) 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 Terminliste03() zur Anzeige der Termine im Dokument erfolgt an der Stelle (im Body), wo die Liste erscheinen soll mit der Notierung
<script type="text/javascript" language="JavaScript">
<!-- Begin
Terminliste08();
// End -->
</script>
Grafiken
Die Grafiken habe ich im Unterordner "grafiken" abgelegt.
Ich verwende in der Terminliste auf dieser Seite Symbole in der Größe üblicher Icons mit den Abmessungen 32 × 32 Pixel. Für Ihre Liste finden Sie im Web tausende solcher Grafiken, die man in der Regel kostenlos nutzen darf. Natürlich können Sie auch andere Grafiken einsetzen.
          
         
Die Größe der Grafiken ist zentral festgelegt:
// Abmessungen der Grafiken
var Breite = "32";
var Hoehe = "32";
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
Das war's schon! Lassen sie sich von den Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code der Textdatei in ihre Seite. Wenn sie mehr über Anpassungen erfahren möchten, lesen Sie unten weiter. Sie können diese Vorlage erweitern, Prüfungen hinzufügen und die CSS-Angaben ändern.
Anpassungen
Anpassungen werden entweder im CSS-Block oder im Scriptcode eingetragen.
Textformatierung (CSS-Anweisungen im Head)
CSS-Anweisungen im Head stehen innerhalb der CSS-Deklaration
Die Textdarstellung der Termintabelle kann unabhängig von anderen Formatierungen innerhalb ihrer Seite formatiert werden, da der Tabelle eine ID zugeordnet wurde. Für Text in Tabellenzellen innerhalb der Tabelle mit der ID 'Tabelle' gilt (CSS-Anweisung im Head):
#Tabelle td
{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
color: #0090E0;
line-height:130%;
}
Ändern sie die Einträge nach Belieben.
Tabellenbreite
Die Breite der Tabelle ist auf 520 Pixel eingestellt. Sie können diese Angabe ändern und die Breite als festen Wert in Pixel oder Prozent eintragen.
#Tabelle
{
width:520px;
}
#Tabelle
{
width:80%;
}
Tabellenformatierung
#Tabelle
{
width:520px;
background: url(../images/bg-streifen-diagonal.gif) #FFFFFF;
border:1px solid #BFBFBF;
}
Rand für die Grafiken
#Tabelle img
{
border:1px solid #BFBFBF;
}
|
Home • Datum • Terminliste 08
Demo 01
Download