barrierefreies Webdesign Ingo Turski

zum Inhalt

Ingo

Tips und Tricks:Terminkalender-Einträge über Javascript ausblenden

Sie haben einen Terminkalender, in dem Sie die nicht mehr aktuellen Termine löschen und hierzu nicht auf serverseitige Techniken zurückgreifen wollen oder können? Um die abgelaufenen Termine bis zur nächsten manuellen Löschung auszublenden, bietet sich meine Javascript-Lösung an:

Datum Termin
17.04.2017 Ostermontag 2017
02.04.2018 Ostermontag 2018
22.04.2019 Ostermontag 2019
17.08.2021 bestimmt bald überholt..;-)
<script type="text/javascript">
// <![CDATA[
function aktualisieren() {
  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 Eintraege = 0;
  for (var i = 0; i < Zeilen.length; i++) {
    if (Zeilen[i].title) {
      if (parseInt(Zeilen[i].title) < aktuell) Zeilen[i].style.display = "none";
      else Eintraege++;
    }
  }
  if (!Eintraege) {
    document.getElementById("Eintraege").innerHTML = "Keine Termine eingetragen.";
  }
}
// ]]>
</script>
...
<body onload="aktualisieren();">
...
<table>
  <tr id="Eintraege">
    <th>Datum</th> <th>Termin</th>
  </tr>
  <tr title="20170417">
    <td>17.04.2017</td> <td>Ostermontag 2017</td>
  </tr>
  <tr title="20180402">
    <td>02.04.2018</td> <td>Ostermontag 2018</td>
  </tr>
  <tr title="20190422">
    <td>22.04.2019</td> <td>Ostermontag 2019</td>
  </tr>
  <tr title="20210817">
    <td>17.08.2021</td> <td>bestimmt bald überholt..;-)</td>
  </tr>
</table>

Ich habe hier das title-Attribut zweckentfremdet und für jede auszublendende <tr> das Datum in der leicht auszuwertenden Form "jjjjmmtt" angegeben. Pünktlich um Mitternacht - sofern der Besucher ein korrektes Systemdatum eingestellt und JavaScript aktiviert hat - ergibt der zuletzt im onload aufgerufenen Javascript notierte Datumsvergleich true und die betreffende Tabellenzeile wird über die CSS-Definition display:none ausgeblendet.

Diese Lösung geht davon aus, daß die Termine als tabellarische Daten über eine Tabelle ausgezeichnet sind. Da das Script nur Tabellenzeilen mit einem title-Attribut berücksichtigt, kann es problemlos auch bei Verwendung weiterer Tabellen eingesetzt werden.
Falls der beim Überfahren mit der Maus angezeigte Tooltip stört, kann auch ein anderes Universalattribut zur Angabe des Datums verwendet werden; Sie können title im Javascript- und HTML-Code z.B. durch id ersetzen. Und natürlich lassen sich bei Bedarf auch andere Elemente als tr auf diese Weise manipulieren.

Sie können natürlich auch andere Block-Elemente wie z.B. <div> ausblenden, für die Sie exklusiv das title-Attribut oder ein anderes angeben, wenn Sie im Javascript "tr" durch das gewählte Element (z.b. "div") austauschen.