Termine Ankuendigen 03
    
HOME
Demo  Quellcode  ZURÜCK SITEMAP  

 Jahresterminliste 05 - Termine ankündigen (jahresübergreifend)

Das Script zeigt Termine (Tag, Monat, Jahr) in einer Tabelle an. Die bis dahin verbleibende (oder verstrichene) Zeit in Tagen wird berechnet.

in xx Tagen am xx.xx.xxxx Beschreibungstext

In Kürze anstehende, verstrichene und in der Zukunft liegende Termine werden mit einer farbigen Grafik unterschieden. Ältere Termine können optional ausgeblendet werden.

Einsatzbereiche Darstellung Dateneinträge Aufwand Anpassungen


Ausgabe in einer Tabelle:  Datumsinfo + 1 Beschreibung mit zwei Optionen:
  1. alte Termine werden nicht mehr angezeigt
  2. alte Termine werden als solche markiert

Im Gegensatz zu den Terminlisten 3 und 4 (für Termine im laufenden Kalenderjahr), die zur jährlichen Wiederverwendung gedacht sind, wird bei dieser jahresübergreifenden Terminliste lediglich die Entnahme der Einträge aus dem Array, die Berechnung der Datumsinformation und die Ausgabe in einer Tabelle mit JavaScript umgesetzt.

 
   Einsatzbereiche

Nichts stört auf einer Webseite mehr als eine Terminliste, die den Anschein erweckt sie sei veraltet. Mit diesem Script kann man ein wenig mogeln und muss nicht täglich an den Rechner um alte Termine aus der Liste zu löschen. Diese Arbeit wird ihnen abgenommen.

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. Dabei soll die Seite für einen längeren Zeitraum wartungsfrei bleiben und bereits verflossene Termine automatisiert nicht mehr / oder farblich markiert anzeigt werden.

Zur Hervorhebung können (abhängig von der Differenz in Tagen zum aktuellen Datum) für die Tabellenzeilen 4 unterschiedliche Hintergrundfarben und zusätzlich 4 Mini-Grafiken verwendet:

 alte Termine sollen markiert (oder ausgeblendet) werden

 aktuelle Termine (heute) sollen hervorgehoben werden

 in Kürze anstehende Termine sollen hervorgehoben werden (14 Tage)

 in Zukunft anstehende Termine sollen markiert werden



 

   Ausgabe in dieser Version 05: In einer Tabelle

In dieser Version 05 lasse ich die Ausgabe der Liste in eine Tabelle schreiben, die sie mit CSS-Angaben gestalten können. Eine Version mit der Ausgabe als Text steht aber auch zur Verfügung. Siehe Menü 'Datum' Jahresterminliste 01.


Als Beispiel einer Anwendung habe ich hier die Terminliste einer Schule genommen.
Die Option 'alte Termine ausblenden' wurde hier nicht gewählt.

Die Liste können sie natürlich nach Geschmack und Layout anpassen. Beispiele unterschiedlicher Darstellungen finden sie weiter unten unter 'Anpassungen'.



schööööön ordentlich, wie Jupp Zupp es mag!

 

   Die Termineinträge 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 20, 2007";
Termin[Termin.length]="Grünschnittabfuhr Tannenbäume";

Termin[Termin.length]="March 7, 2008";
Termin[Termin.length]="Vorstandssitzung Gaststätte Meier";

Termin[Termin.length]="April 12, 2009";
Termin[Termin.length]="Schulfest Aula der KGS";

...

Englische Schreibweise des Monatsnamens beachten (Liste im Quelltext notiert):

January, February, March, April, May, June,
July, August, September, October, November, December




   alte Termine ausblenden

Wenn sie statt der farblichen Markierung der abgelaufenen Termine die Termine lieber ausblenden möchten, legen sie das im Script fest. Dazu tragen sie als Wert für die Variable 'Antwort' eine 0 (Null) ein: 
// Frage: Auch alte Termine listen?
// "1" listet alte Termine, "0" für Ausblenden
Antwort = "1";

 

   Aufwand zum Einbau in ihre Seite

1) kopieren sie das Script in den Head-Bereich ihrer Seite (siehe Textdatei)
2) laden sie die 4 (Standard-)Grafiken herunter
3) ändern sie die Eintragungen im Array für ihre Liste
4) notieren sie den Aufruf im Body-Bereich ihrer Seite
5) testen sie die Anzeige mit unterschiedlichem Datum   Info einblenden

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'


 Selbst erstellte Grafiken zum Download rechtsklicken  (im gleichen Odner ablegen)

Hier verwendet (Standard)              (die ersten 4 Grafiken herunterladen)
alternative   bullet 10 x 10 Pixel
Farbnuancen                     kal 14 x 16 Pixel

Infos zur Einbindung alternativer Grafiken finden sie weiter unten unter 'Anpassung'.


Ort der Anzeige im Dokument

Der Aufruf der Funktion Terminliste03() 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
Terminliste03();
// End -->
</script>


 

   Anpassungen

1) Textformatierung

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 'rand06' gilt (CSS-Anweisung im Head): 
/* Textformatierung der Liste */
#rand06 td {
  font-family:Verdana,Arial,Helvetica;
  font-size:11px;
  font-weight:normal;
  color: #000000;
}
Ändern sie die Einträge nach Belieben.


2) Randformatierung + Trennlinie

Die Formatierung der Tabellenränder wurde über CSS gesteuertet. Ich zeige eine waagerechte Trennlinie durch Notierungen für den unteren Rand (festgelegt Stärke, Typ und Farbe): 
/* Randformatierung + Trennlinie */
#rand06 {
  border-collapse: collapse;
}
#rand06 td, #rand06 th {
  border-bottom: 1px solid #F0E1FF;
}
Ändern sie die Einträge nach Belieben.


3) Tabellenbreite

Die Breite der Tabelle ist im Script auf "100%" eingestellt, füllt also die gesamte verfügbare Breite innerhalb des übergeordneten HTML-Elements. Sie können diese Prozentangabe ändern oder die Breite als festen Wert in Pixel eintragen.

statt "100%" z.B. "80%" oder "460" (die Angabe 'Pixel' entfällt im HTML-Attribut für die Breite)
var DiesesJahr = now.getFullYear();
document.write('<table width="100%" id="rand06" style="border-top:1px solid
4) Zeilenhöhe

Die Höhe der Tabellenzeilen ist im Script auf "40" eingestellt. So erreiche ich eine gleichmäßige Ansicht auch bei zweizeiligen Beschreibungstexten. Sie können diese Angabe in der Variablen 'zeilenhoehe' festlegen.

var zeilenhoehe = 40;
5) Farben und Grafiken

Die Formatierungen der Ternnlinien wurden mit CSS festgelegt und sind Randdarstellungen der Tabelle. Sie finden die CSS-Anweisungen im Head-Bereich (#rand06).

Grafiken und Hintergrundfarben können terminabhängig unterschiedlich dargestellt werden (4 Unterscheidungen). Tragen sie dazu entsprechende Farbwerte und Grafik-Referenzen ein.

vor 5 Tagenam xx.xx.xxxxSteuertermin 1. Quartal
Heuteam xx.xx.xxxxFerienwohnung
in 10 Tagenam xx.xx.xxxxGeburtstag Jupp Zupp
in 26 Tagenam xx.xx.xxxxGeburtstag Hein Blöd


if(Tage < 0)
{
document.write("<tr bgcolor='#F9FFF9'>");
document.write('<td><img src="bullet-green.gif" width="10" ... alt=""></td>');
}
else if(Tage == 0)
{
...
In 2 Bereichen des JavaScripts (einmal für die Liste mit, einmal für die Option ohne Darstellung der abgelaufenen Termine) können sie die Eintragungen ändern. Es werden 4 Zustände unterschieden, für die sie Grafik und Hintergrundfarbe festlegen können.

Mini-Grafiken für ihre alternativ gestaltete Liste finden sie in meiner MINI-IMAGE-BOX

vor 5 Tagenam xx.xx.xxxxSteuertermin 1. Quartal
Heuteam xx.xx.xxxxFerienwohnung
in 10 Tagenam xx.xx.xxxxGeburtstag Jupp Zupp
in 26 Tagenam xx.xx.xxxxGeburtstag Hein Blöd


vor 5 Tagenam xx.xx.xxxxSteuertermin 1. Quartal
Heuteam xx.xx.xxxxFerienwohnung
in 10 Tagenam xx.xx.xxxxGeburtstag Jupp Zupp
in 26 Tagenam xx.xx.xxxxGeburtstag Hein Blöd


vor 5 Tagenam xx.xx.xxxxSteuertermin 1. Quartal
Heuteam xx.xx.xxxxFerienwohnung
in 10 Tagenam xx.xx.xxxxGeburtstag Jupp Zupp
in 26 Tagenam xx.xx.xxxxGeburtstag Hein Blöd

NACH OBEN