Datumsberechnung periodische Liste
 HomeDatum • periodische Liste  Download  Beispiel  Quellcode 

Terminliste 09 - periodisch wiederkehrend

Das Script erstellt, abhängig vom Startdatum und der Anzahl der vorgegebenen Termine eine Terminliste. Die Einträge der Elemente einer definierten Gruppe werden nacheinander in die Aufzählung eingebunden. Optional kann eine kleine Grafik angezeigt werden.
datum termine wiederkehrend periodisch terminliste

Datumsberechnung - periodisch wiederkehrende Termine - Modul 01

UPDATE  10.10.2015  Eine dynamische Liste periodisch wiederkehrender Ereignisse soll automatisiert erstellt werden. Dabei soll das Script die vorgegebenen Elemente der Gruppe (aus dem Array), nacheinander in die Liste einbeziehen. Der Datumswert soll gemäß einer Vorgabe jedesmal um den Abstand in Tagen erhöht und angezeigt werden. Der Wochentag und die Kalenderwoche wird errechnet.

Erklärung Eigenschaften Grafiken Formatierung mein Tipp


Terminliste für Rufbereitschaft, Notdienst, Schichtplan, Treppenhausreinigung, ...
Demoliste mit 3 Termin-Gruppen:

DienstSchichtleiter TagDatum (in der KW)
FrühdienstJupp Zuppab Montag05.05.2008    KW 18
SpätdienstJupp Zuppab Montag12.05.2008    KW 19
NachtdienstJupp Zuppab Montag19.05.2008    KW 20
FrühdienstJupp Zuppab Montag26.05.2008    KW 21
SpätdienstJupp Zuppab Montag02.06.2008    KW 22
NachtdienstJupp Zuppab Montag09.06.2008    KW 23
FrühdienstJupp Zuppab Montag16.06.2008    KW 24

Demoliste mit 2 Termin-Gruppen:

TrainingsortMannschaftWochentagDatum (in der KW)
SporthalleA-JugendDonnerstag03.01.2013    KW 01
AschenplatzA-JugendDonnerstag10.01.2013    KW 02
SporthalleA-JugendDonnerstag17.01.2013    KW 03
AschenplatzA-JugendDonnerstag24.01.2013    KW 04
SporthalleA-JugendDonnerstag31.01.2013    KW 05
AschenplatzA-JugendDonnerstag07.02.2013    KW 06
SporthalleA-JugendDonnerstag14.02.2013    KW 07
AschenplatzA-JugendDonnerstag21.02.2013    KW 08


 

Beispiel zur Erklärung

Am einfachsten ist es, ich erkläre das an einem Beispiel. Hier meine Vorgaben die ich in Variablen oder einem Array ablege:

  Typ Name Wert hier im Beispiel
Start Variable StartAm "16.11.2015"
Gruppe Array GruppeArray "Meier", "Beckers", "Schulze", "Schmitz", "Müller"
Abstand Variable TageZyklus 7
Anzahl Variable AnzahlTermine 12
Text Variable Beschreibung "Treppenhaus putzen"


Daraus wird automatisch diese Liste mit 5 Gruppen und 12 Terminen erzeugt:



Die Angabe der Kalenderwoche bezieht sich auf das berechnete Datum des Termins. Der Termin fällt also in die Kalenderwoche X. Der Termin ist nicht grundsätzlich der Beginn der KW. Das träfe nur zu, wenn der Termin ein Montag ist. (Die erste Kalenderwoche eines Kalenderjahres ist die Woche, in die mindestens 4 Tage der ersten 7 Januartage fallen.)

Anwendungen: Dienstplan, Bereitschaftsdienst, Müllabfuhr, Fahrdienst, Notdienst, ...

Eine solche Berechnug wird zur lokalen Nutzung normalerweise mit Exel oder Access erstellt. Zur Darstellung auf einer Webseite erzeuge ich sie mit JavaScript, damit man nicht auf eine Datenbank zugreifen muss. Sie können die (ansonsten leere) HTML-Seite aber auch einfach ausdrucken und den Plan aufhängen, fertig.

Das sieht dann so aus: Vorschau als PDF
 

Vorzüge ddieser Terminliste

1) Anzahl der Termin-Gruppen

Die Elemente der Termin-Gruppen (z.B. 5 Namen der Mieter) werden automatisch in die Terminliste mit einbezogenen. Wenn Sie 2 Elemente eintragen (z.B. "Frühdienst","Spätdienst"), würde die Liste 2 Termin-Gruppen in die Terminliste einbeziehen. Die Elemente erscheinen nacheinander in der vorgegebenen Reihenfolge. Nach dem letzten Element wird dann wieder mit dem ersten Element begonnen. Tragen Sie nur eine einzige Gruppe (z.B. "Restmüll") mit einem Zyklus von 14 ein, erscheint der Termin "Restmüll" im zweiwöchigen Abstand.

2) regelmäßige Termine (Zyklus), Abstand in Tagen

Der von Ihnen eingetragene Abstand in Tagen legt den zeitlichen Abstand (Zyklus) der wiederkehrenden Termine fest. Ob es nun der Termin für die Entsorgung des Papiermülls mit 21 tägigem Abstand, die Tage für den Eisprung Ihrer 3 Freundinnen oder der Mondzyklus sein soll, das Script wird die Termine genau berechnen. Nicht nur theoretisch können Sie auch eine Dezimalzahl als Wert eintragen. Für den Mondzyklus z.B. den Wert für den synodischer Monat 29.53059 (da müsste man beim Startdatum allerdings die Uhrzeit berücksichtigen).

Findet z.B. ein wöchentliches Training statt, Woche 1 und 2 in der Halle in jeder 3. Woche stattdessen ein Lauftraining, tragen Sie 3 Gruppen ein ("Halle","Halle","Waldpfad") und setzen den Zyklus auf 7.

3) Länge der Liste

Die Anzahl der zu listenden Termine legen Sie in der Variablen 'AnzahlTermine' fest. Die Terminliste wird dann Einträge für jedes berechnete Tatum in der entsprechneden Anzahl von Zeilen anzigen.

4) Erscheinungsbild

Das Erscheinungsbild der Liste bestimmen Sie selbst. Text, Hintergrundfarbe und Randformatierung der Terminzeilen können mit CSS fetgelegt werden. Sie können (optional) vor jedem Termin eine kleine Grafik anzeigen lassen.



Aufwand für den Webmaster

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'



Das war's schon, mehr müssen Sie nicht tun! Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code in Ihre Seite (Link zur Textdatei des Quellcodes ganz oben). Wenn Sie mehr über Funktion und Anpassungen erfahren möchten, lesen Sie unten weiter.

Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Benötigte Grafiken und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte. Entnehmen Sie den Quellcode der Demodatei.









Eckdaten eintragen

Nach meinem Update vom Oktober 2015 kann das Datum nun in herkömmlicher Weise eingetragen werden. Statt "March 15, 2013" erwartet das Script nun die Angabe "15.03.2013" im Format "TT.MM.JJJJ".

Beispiel Treppenhaus putzen wöchentlich für 4 Mietparteien:
var StartDatum = new Date("01.07.2015");
var TageZyklus = 7;
var AnzahlTermine = 26;
var Beschreibung = "Treppenhaus";
var GruppeArray = new Array("Meier","Beckers","Schulze","Schmitz");
Beispiel Wertstofftonne alle 14 Tage:
var StartDatum = new Date("03.01.2015");
var TageZyklus = 14;
var AnzahlTermine = 20;
var Beschreibung = "Mülltone raussetzen";
var GruppeArray = new Array("Wertstofftonne");
Beispiel Lauftraining jede 3. Woche:
var StartDatum = new Date("08.07.2015");
var TageZyklus = 7;
var AnzahlTermine = 26;
var Beschreibung = "Trainingsort B-Jugend";
var GruppeArray = new Array("Sporthalle","Sporthalle","Wald-Laufpfad");

 

Grafiken für Termin-Gruppen

Für jedes Element der Gruppe wird am Anfang einer Zeile eine eigene Grafik eingeblendet. Sie bestimmen ob eine Grafik angezeigt werden soll oder nicht. Durch Ihre eigene Auswahl von kleinen Grafiken bestimmen Sie die Grafik selbst.
// Grafik anzeigen?
// Grafik anzeigen = 1, nicht anzeigen = 0
var Grafik = 1;
Nach meinem Update vom 15.10.2013 werden die URLs der Grafiken in einem Register abgelegt. Das Script entnimmt die Informationen dem Array um sie am Beginn der Zeile anzuzeigen (wenn Sie das möchten).

Sie können eigene Grafiken verwenden!
// hier kann man Dateinamen der Grafiken eintragen
// mindestens so viele Grafiken wie Einträge bei GruppeArray
var GrafikenArr = new Array;
GrafikenArr[GrafikenArr.length] = 'pers00.gif';
GrafikenArr[GrafikenArr.length] = 'pers01.gif';
GrafikenArr[GrafikenArr.length] = 'pers02.gif';
GrafikenArr[GrafikenArr.length] = 'pers03.gif';
GrafikenArr[GrafikenArr.length] = 'pers04.gif';
GrafikenArr[GrafikenArr.length] = 'pers05.gif';
Sie können natürlich identische Grafiken eintragen!

In meinem Beispiel verwendete Grafiken:

 (im Download enthalten)

alternative Grafiken  (rechtsklicken zum Download):





Weitere Grafiken finden Sie in meiner MINI-IMAGE-BOX bei Symbolen für Listen und Aufzählungen.
 

Tabellenformatierung - Rand + Farben

Ich verwende CSS-Anweisungen um das Erscheinungsbild der Tabelle festzulegen. Anpassungen können Sie dort eintragen. CSS-Angaben für die Beispiel-Terminliste (im Download enthalten):
<style type="text/css">
<!--

/* Tabellenformatierung (Breite 650) */

.rand03 {
border-collapse: collapse;
width: 650px;
}

/* erste Zeile Titelzeile */

.rand03 thead th {
padding: 5px;
font-family: Verdana,sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
background-color: #D7006B;
border-bottom: none;
text-align: left;
}

.rand03 td {
padding: 5px;
font-family: Verdana,sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
border-bottom: 1px dotted #AFAFAF;
text-align: left;
}

// spezielle Spaltenbreiten

.rand03 .BezSpalte {
width: 210px;
}

.rand03 .WtagSpalte {
width: 80px;
}

.rand03 .DatumSpalte {
width: 140px;
}


-->
</style>



Aufgabe und Arbeitsweise des Scripts

Ein Array (Register) enthält x Elemente. Abhängig von der Anzahl der vorgegebenen Array-Elemente soll eine Liste von Terminen erstellt werden, die zeilenweise dargestellt werden. Die Einträge im Register sollen nacheinander entnommen und in die Aufzählung eingebunden werden. Nach einem Durchlauf des Registers beginnt die Entnahme der Elemente wieder von vorne. In jeder Zeile der Terminliste wird ein Datumswert angezeigt, der von Zeile zu Zeile um den Vorgabewert (zeitlicher Abstand im Beispiel = 7 Tage) erhöht wird.

Der Wochentag des Datumswertes und die Kalenderwoche wird angezeigt.

Vorgaben:




Beispiele der Gestaltung / Formatierung

Beispiel 01

Anzahl der Termin-Gruppen (Array-Elemente): 5
GruppeArray = new Array("Meier", "Beckers", "Schulze", "Schmitz", "Müller");
Treppenhaus putzen Mietobjekt Breslauer Str. 22

WerWas TagDatum (in der KW)
MeierTreppenhausam Montag07.01.2008    KW 01
BeckersTreppenhausam Montag14.01.2008    KW 02
SchulzeTreppenhausam Montag21.01.2008    KW 03
SchmitzTreppenhausam Montag28.01.2008    KW 04
MüllerTreppenhausam Montag04.02.2008    KW 05
MeierTreppenhausam Montag11.02.2008    KW 06
BeckersTreppenhausam Montag18.02.2008    KW 07
SchulzeTreppenhausam Montag25.02.2008    KW 08
SchmitzTreppenhausam Montag03.03.2008    KW 09
MüllerTreppenhausam Montag10.03.2008    KW 10
MeierTreppenhausam Montag17.03.2008    KW 11
BeckersTreppenhausam Montag24.03.2008    KW 12
SchulzeTreppenhausam Montag31.03.2008    KW 13
SchmitzTreppenhausam Montag07.04.2008    KW 14
MüllerTreppenhausam Montag14.04.2008    KW 15
MeierTreppenhausam Montag21.04.2008    KW 16
BeckersTreppenhausam Montag28.04.2008    KW 17
SchulzeTreppenhausam Montag05.05.2008    KW 18
SchmitzTreppenhausam Montag12.05.2008    KW 19
MüllerTreppenhausam Montag19.05.2008    KW 20


Beispiel 02

Anzahl der Termin-Gruppen (Array-Elemente): 3
GruppeArray = new Array("Sporthalle", "Aschenplatz", "Stadion");
TrainingsortMannschaftWochentagDatum in der KW
SporthalleA-JugendDonnerstag03.01.2013    KW 01
AschenplatzA-JugendDonnerstag10.01.2013    KW 02
StadionA-JugendDonnerstag17.01.2013    KW 03
SporthalleA-JugendDonnerstag24.01.2013    KW 04
AschenplatzA-JugendDonnerstag31.01.2013    KW 05
StadionA-JugendDonnerstag07.02.2013    KW 06
SporthalleA-JugendDonnerstag14.02.2013    KW 07
AschenplatzA-JugendDonnerstag21.02.2013    KW 08
StadionA-JugendDonnerstag28.02.2013    KW 09
SporthalleA-JugendDonnerstag07.03.2013    KW 10
AschenplatzA-JugendDonnerstag14.03.2013    KW 11
StadionA-JugendDonnerstag21.03.2013    KW 12
SporthalleA-JugendDonnerstag28.03.2013    KW 13
AschenplatzA-JugendDonnerstag04.04.2013    KW 14
StadionA-JugendDonnerstag11.04.2013    KW 15
SporthalleA-JugendDonnerstag18.04.2013    KW 16
AschenplatzA-JugendDonnerstag25.04.2013    KW 17
StadionA-JugendDonnerstag02.05.2013    KW 18
SporthalleA-JugendDonnerstag09.05.2013    KW 19
AschenplatzA-JugendDonnerstag16.05.2013    KW 20


Info: CSS-Klasse der Tabelle oben ist "rand05", zeilenweise Einfärbung mit
.rand05 tr:nth-child(3n+1) {background-color: #CFF0CE}
.rand05 tr:nth-child(3n+2) {background-color: #FFF1BE}
.rand05 tr:nth-child(3n+3) {background-color: #C4D3F6}



Beispiel 03

Anzahl der Termin-Gruppen (Array-Elemente): 3
GruppeArray = new Array("Frühdienst", "Spätdienst", "Nachtdienst");
DienstSchichtleiter TagDatum (in der KW)
FrühdienstJupp Zuppab Montag05.05.2008    KW 18
SpätdienstJupp Zuppab Montag12.05.2008    KW 19
NachtdienstJupp Zuppab Montag19.05.2008    KW 20
FrühdienstJupp Zuppab Montag26.05.2008    KW 21
SpätdienstJupp Zuppab Montag02.06.2008    KW 22
NachtdienstJupp Zuppab Montag09.06.2008    KW 23
FrühdienstJupp Zuppab Montag16.06.2008    KW 24
SpätdienstJupp Zuppab Montag23.06.2008    KW 25
NachtdienstJupp Zuppab Montag30.06.2008    KW 26
FrühdienstJupp Zuppab Montag07.07.2008    KW 27
SpätdienstJupp Zuppab Montag14.07.2008    KW 28
NachtdienstJupp Zuppab Montag21.07.2008    KW 29
FrühdienstJupp Zuppab Montag28.07.2008    KW 30
SpätdienstJupp Zuppab Montag04.08.2008    KW 31
NachtdienstJupp Zuppab Montag11.08.2008    KW 32
FrühdienstJupp Zuppab Montag18.08.2008    KW 33
SpätdienstJupp Zuppab Montag25.08.2008    KW 34
NachtdienstJupp Zuppab Montag01.09.2008    KW 35
FrühdienstJupp Zuppab Montag08.09.2008    KW 36
SpätdienstJupp Zuppab Montag15.09.2008    KW 37


Info: CSS-Klasse der Tabelle oben ist "rand06", zeilenweise Einfärbung mit
.rand06 tr:nth-child(3n+1) {background-color: #F5ECFF;}
.rand06 tr:nth-child(3n+2) {background-color: #FFF0F0}
.rand06 tr:nth-child(3n+3) {background-color: #E8F3FF}

 

Tipps für Bastler

Angenommen Sie nutzen diese Terminliste um einen Jahresplan für das Training Ihrer Fußballmannschaft zu erstellen. Möglicherweise auch nur für den Ausdruck und nicht für eine Webseite. Sie möchten aber aus der automatisch generierten Liste für 52 Wochen die Termine während der Ferien löschen oder wegen einem Feiertag einen Termin verlegen. Nun, mit ein paar Klicks bleibt mein Script-Modul trotzdem wertvoll und erspart eine Menge Arbeit: Vorgehensweise
  1. Eckwerte eintragen und Liste im Browser anzeigen lassen
  2. dargestellte Tabelle im Browserfenster mit der Maus markieren
  3. rechtsklicken und 'Auswahl-Quelltext anzeigen' auswählen
  4. Auswahl kopieren und in eine HTML-Seite einfügen
  5. Quellcode modifizieren, Datei speichern

... und jetzt etwas langsamer

1) Eckwerte eintragen und die Liste im Browser anzeigen lassen




2) dargestellte Tabelle im Browserfenster mit der Maus markieren




3) rechtsklicken und 'Auswahl-Quelltext anzeigen' auswählen




4) Auswahl kopieren und in eine HTML-Seite einfügen




5) Quellcode modifizieren, Datei speichern und anzeigen.








Sie möchten die Liste ausdrucken?

Möchten Sie die Liste ausdrucken wählen Sie NICHT 'drucken' sondern die Option 'Druckvorschau', passen dabei die Größe an und blenden (Menüoptionen Seite einrichten) Kopf- und Fußzeilen und unerwünschte Elemente aus.







Das könnte Sie auch interessieren: