Termine Automatisieren - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

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 aufrufende 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.2020 Heilig Abend 2020
31.12.2020 Silvester 2020
17.02.2021 Hochzeitstag
23.05.2022 Abschlussprüfung
24.07.2022 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.
Download Button
Downloads:
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>
<th style="text-indent:30px;">Termin</th>
</tr><br>
<tr title="20191224">
<td>24.12.2019</td>
<td style="text-indent:30px;">Heilig Abend 2019</td>
</tr><br>
<tr title="20191231">
<td>31.12.2019</td>
<td style="text-indent:30px;">Silvester 2019</td>
</tr><br>
<tr title="20200217">
<td>17.02.2020</td>
<td style="text-indent:30px;">Hochzeitstag</td>
</tr><br>
<tr title="20200523">
<td>23.05.2020</td>
<td style="text-indent:30px;">Abschlussprüfung</td>
</tr><br>
<tr title="20210724">
<td>24.07.2021</td>
<td style="text-indent:30px;">Abreise Urlaub Florida</td>
</tr><br>
</table>
Code Datei "ablaufcheck.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.

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.
Download Button
Downloads:
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 "termincheck.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";
}
}
}
}
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 3 Online
            » 159 Heute
            » 2 Gestern
            » 612 Woche
            » 9378 Monat
            » 42657 Jahr
            » 513325 Gesamt
            Record: 1679 (15.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt