Termine Automatisieren
Scripte > Text- & Tabellenobjekte
Tabellen, Texte und Termine automatisieren
Du hast Termine zu verwalten, die immer auf dem aktuellen Stand sein sollen? Du möchtest nicht mehr aktuelle Termine manuell löschen müssen? Du möchtest Textpassagen automatisch nach Termin ausblenden lassen? Dazu bietet Javascript eine Lösung zum automatisieren:
Bei den Terminen findet das title-Attribut Anwendung und das auszublendende <tr> in Form eines leicht auszuwertenden Datums jjjjmmtt. Bei korrekter Systemzeit wird im onload aufgerufenen Javascript notierte Datumsvergleich true ausgewertet und die betreffende Tabellenzeile wird über die CSS-Definition display:none ausgeblendet, vorausgesetzt der Besucher hat Javascript aktiviert. Falls die Anzahl der anzuzeigenden aktuellen Termine beschränkt werden sollen, muss die Obergrenze bei var angepasst werden.
Es sind immer 2 Varianten zur Einbindung erläutert. Sollte dieses Skript auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <?php include "...."; ?> , um Änderungen nur in einer Datei durchführen zu müssen. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head>, Onload-Code innerhalb des Body-Tag <body onload ...> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufenden Datei einfügen.
Eine demo.html und demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.php" bzw. "http://www.domain.tld/demo.html", die auch durch einen Doppelklick ausgeführt werden kann.
Hier gehen wir davon aus, daß die Termine in tabellarischer Form dargestellt werden. Da das Script nur Tabellenzeilen mit einem title Attribut berücksichtigt, kann es problemlos auch bei Verwendung weiterer Tabellen eingesetzt werden.
Das Element title im Javascript- und HTML-Code kann auch durch ein anderes Element, z. B. id ersetzt werden und bei Bedarf lassen sich auch andere Elemente als tr auf diese Weise manipulieren. Abgelaufene Termine werden nicht mehr angezeigt, da diese ausgeblendet werden.
Ausgabe:
Datum | Termin |
---|---|
24.12.2025 | Heilig Abend 2025 |
31.12.2025 | Silvester 2025 |
17.02.2026 | Hochzeitstag |
23.05.2026 | Abschlussprüfung |
24.07.2026 | Abreise Urlaub Florida |
Natürlich können auch andere Block-Elemente wie ganze Textbereiche ausgeblendet werden, wenn man im Javascript und im HTML-Code "tr" durch das gewählte Element (z.b. "div") austauscht.
Dazu hier ein Beispiel.
Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj164_1/termincheck.js"></script>
Code für den <BODY> Tag
onload="Obj164_1();"
Wer nicht mit Website X5 arbeitet:
<body onload="Obj164_1();">
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj164_1/termin_inc.html"; ?>
Alternative Einbindung:
<table><tr><th>Datum</th></tr><br><th style="text-indent:30px;">Termin</th><tr title="20251224"><td>24.12.2025</td><td style="text-indent:30px;">Heilig Abend 2025</td></tr><br><tr title="20251231"><td>31.12.2025</td><td style="text-indent:30px;">Silvester 2025</td></tr><br><tr title="20260217"><td>17.02.2026</td><td style="text-indent:30px;">Hochzeitstag</td></tr><br><tr title="20206523"><td>23.05.2026</td><td style="text-indent:30px;">Abschlussprüfung</td></tr><br><tr title="20260724"><td>24.07.2026</td><td style="text-indent:30px;">Abreise Urlaub Florida</td></tr><br>
</table>
Code Datei "termincheck.js"
function Obj164_1() {
if (!document.getElementsByTagName) return;var Datum = new Date();var Jahr = Datum.getFullYear().toString();var Monat = (Datum.getMonth()+1).toString();if (Monat.length == 1) Monat = "0" + Monat;var Tag = Datum.getDate().toString();if (Tag.length == 1) Tag = "0" + Tag;var aktuell = parseInt(Jahr + Monat + Tag);var Zeilen = document.getElementsByTagName("tr");var Obergrenze = 0; var Rest = Obergrenze;for (var i = 0; i < Zeilen.length; i++) {
if (Zeilen[i].title) {
if (parseInt(Zeilen[i].title) < aktuell) Zeilen[i].style.display = "none";else if(Obergrenze) {
if(Rest) Rest--; else Zeilen[i].style.display = "none";
}
}
}
}
Beispiel für Textpassagen:
Hier wurde das <tr title= gegen <div id= ausgetauscht.
Hier wurde das <tr title= gegen <div id= ausgetauscht.
Ausgabe:
21.02.2025 | Referatvorbereitung: Wie programmieren wir eine Homepage mit Hilfe von PHP und JavaScript |
22.02.2025 | Schulung im Seminarraum "Alte Fösterei" in Hamburg. Hotelübernachtung geplant. |
23.02.2025 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. |
Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj164_2/ablaufcheck.js"></script>
Code für den <BODY> Tag
onload="Obj164_2();"
Wer nicht mit Website X5 arbeitet:
<body onload="Obj164_2();">
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj164_2/ablauf_inc.html"; ?>
Alternative Einbindung:
<table>
<div id="20250221">
<tr>
<td>21.02.2025</td><td style="text-indent:30px;">
Referatvorbereitung: Wie programmieren wir eine Homepage mit Hilfe von PHP und JavaScript
</td>
</tr>
</div><div id="20250222">
<tr>
<td>22.02.2025</td><td style="text-indent:30px;">
Schulung im Seminarraum "Alte Fösterei" in Hamburg. Hotelübernachtung geplant.
</td>
</tr>
</div><div id="20250223">
<tr>
<td>23.02.2025</td><td style="text-indent:30px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</td>
</tr>
</div>
</table>
Code Datei "ablaufcheck.js"
function Obj164_2() {
if (!document.getElementsByTagName) return;
var Datum = new Date();
var Jahr = Datum.getFullYear().toString();
var Monat = (Datum.getMonth()+1).toString();
if (Monat.length == 1) Monat = "0" + Monat;
var Tag = Datum.getDate().toString();
if (Tag.length == 1) Tag = "0" + Tag;
var aktuell = parseInt(Jahr + Monat + Tag);
var Zeilen = document.getElementsByTagName("div");
var Obergrenze = 0; var Rest = Obergrenze;
for (var i = 0; i < Zeilen.length; i++) {
if (Zeilen[i].id) {
if (parseInt(Zeilen[i].id) < aktuell) Zeilen[i].style.display = "none";else if(Obergrenze) {
if(Rest) Rest--; else Zeilen[i].style.display = "none";
}
}
}
}
» nach oben «