 Jahresterminliste 04 - Termine ankündigen (Kalenderjahr)
Das Script zeigt Termine (Tag und Monat) des laufenden Kalenderjahres und die bis dahin verbleibende (oder verstrichene) Zeit in Tagen für jeden Termin an.
in xx Tagen am xx.xx. Beschreibung 1, Beschreibung 2
In Kürze anstehende, verstrichene und in der Zukunft liegende Termine werden mit einer farbigen Grafik unterschieden. Ältere Termine können optional ausgeblendet werden.
Ausgabe in einer Tabelle: Datumsinfo + 2 Beschreibungen mit zwei Optionen:
- alte Termine werden nicht mehr angezeigt
- alte Termine werden als solche markiert
Die Terminliste stellt die Eintäge nur für das aktuelle Kalenderjahr dar! Wird sie für wiederkehrende Termine mit gleichem Datum eingesetzt, kann die Liste in der Webseite verbleiben und immer wieder verwendet werden, weil die Jahreszahl ignoriert wird.!
Eine Liste für jahresübergreifende Termine ist z.B. die Terminliste 05.
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 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. Höchstens einmal jährlich sollte der Webmaster die neuen Eckdaten eintragen müssen.
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
Die Ausgabe in dieser Version 04: In einer Tabelle
In dieser Version 04 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.
Die Terminliste behält auch in zukünftigen Jahren seine Gültigkeit, da der Eintrag für die Jahreszahl im Script durch die aktuelle Jahreszahl ersetzt wird. Jährlich wiederkehrenede feste Termine können somit in der Liste verbleiben. Lediglich Einzeltermine müssen gelöscht / hinzugefügt werden. Das sollte die Arbeit des Webmasters erleichtern.
Als Beispiel einer Anwendung habe ich hier eine pers. Terminliste 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 Termineintäge als Array
In einem (Array  ) werden für jeden Termin 3 Einträge abgelegt. Der Erste Eintrag ist jeweils das Datum in englischer Schreibweise. Die zweiten und dritten Einträge können sie selbst festlegen und enthalten dazugehörige Beschreibungen.
Der Eintrag der Jahreszahl ist Pflicht, wird aber im Script durch die aktuelle Jahreszahl ersetzt.
Termin = new Array()
Termin[Termin.length]="January 20, 2000";
Termin[Termin.length]="Grünschnittabfuhr";
Termin[Termin.length]="Tannenbäume";
Termin[Termin.length]="February 5, 2000";
Termin[Termin.length]="Vorstandssitzung";
Termin[Termin.length]="Gaststätte Meier";
Termin[Termin.length]="March 17, 2000";
Termin[Termin.length]="Schulfest";
Termin[Termin.length]="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 Terminliste04() 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
Terminliste04();
// 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) 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
3) 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.
4) Farben und Grafiken
Die Formatierungen der Trennlinien 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 Tagen | am xx.xx | Steuertermin 1. Quartal | Zusatztext |
| Heute | am xx.xx | Ferienwohnung | Zusatztext |
| in 12 Tagen | am xx.xx | Geburtstag Jupp Zupp | Zusatztext |
| in 26 Tagen | am xx.xx | Geburtstag Hein Blöd | Zusatztext |
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 Tagen | am xx.xx | Steuertermin 1. Quartal | Zusatztext |
 | Heute | am xx.xx | Ferienwohnung | Zusatztext |
 | in 12 Tagen | am xx.xx | Geburtstag Jupp Zupp | Zusatztext |
 | in 26 Tagen | am xx.xx | Geburtstag Hein Blöd | Zusatztext |
 | vor 5 Tagen | am xx.xx | Steuertermin 1. Quartal | Zusatztext |
 | Heute | am xx.xx | Ferienwohnung | Zusatztext |
 | in 12 Tagen | am xx.xx | Geburtstag Jupp Zupp | Zusatztext |
 | in 26 Tagen | am xx.xx | Geburtstag Hein Blöd | Zusatztext |
| vor 5 Tagen | am xx.xx | Steuertermin 1. Quartal | Zusatztext |
| Heute | am xx.xx | Ferienwohnung | Zusatztext |
| in 12 Tagen | am xx.xx | Geburtstag Jupp Zupp | Zusatztext |
| in 26 Tagen | am xx.xx | Geburtstag Hein Blöd | Zusatztext |
|
HOME
ZURÜCK 
Einsatzbereiche
