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.2005 Ostermontag 2005
09.04.2007 Ostermontag 2007
24.03.2008 Ostermontag 2008
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 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";
      }
    }
  }
}
// ]]>
</script>
...
<body onload="aktualisieren();">
...
<table>
  <tr>
    <th>Datum</th> <th>Termin</th>
  </tr>
  <tr title="20060417">
    <td>17.04.2006</td> <td>Ostermontag 2006</td>
  </tr>
  <tr title="20070409">
    <td>09.04.2007</td> <td>Ostermontag 2007</td>
  </tr>
  <tr title="20080324">
    <td>24.03.2008</td> <td>Ostermontag 2008</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.

Falls Sie die Anzahl der anzuzeigenden aktuellen Termine beschränken möchten, geben Sie diese bei var Obergrenze ein; ansonsten sind die grau gekennzeichneten Codeteile auch entbehrlich.

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.