Web-Toolbox JavaScript Datum Kalenderblatt

Kalenderblatt 02-A aktuelles Datum

Darstellung eines Kalenderblatts zur Datumsanzeige

Das aktuelle Datum wird als Abreißkalender dargestellt. In diesem Modul wird das aktuelle Datum, der Wochentag, der Monat als Text und das Jahr (vierstellig) angezeigt. Auf andere Funktionen verzichte ich bei diesem Grundmodul. Varianten erlauben die Übergabe eines fixen Datums oder zeigen unterhalb des Kalenderblatts zusätzlich einen von mehreren (uhrzeitabhängigen) Begrüßungstexten.
Rubrik Datum
Rubrik Datum
Modul
Kalenderblatt mit dem aktuellen Datum. Die Anzeigegröße ist hier mit 120 x 125 Pixel festgelegt und abhängig von der verwendeten Grafik. Meine Vorarbeiten sollen die Einbindung erleichtern. Sie müssen lediglich CSS-Anweisungen und das JavaScript in den Head kopieren und die Funktion im Body an der Stelle aufrufen, wo das Kalender-Modul angezeigt werden soll.

Kalenderblatt Darstellung anpassen

Anpassungen für Farbgebung und Schriftgrößen leicht gemacht: Für das Mini-Kalenderblatt wurden Hintergrundgrafik und Textformatierungen in vier CSS-Klassen festgelegt. Durch die Verwendung einer eignen Hintergrundgrafik oder eine der Varianten, die ich weiter unten zum Download anbiete, kann das Mini-Kalenderblatt angepasst werden. Auch die Auswahl einer anderen Schrifttype, Textfarbe und der Schriftgröße in den CSS-Anweisungen verändert das Erscheinungsbild. 12 Hintergrundgrafiken zum Download finden sie weiter unten.

Bei diesen 6 Demo-Grafiken erkennen sie die Erweiterung des Scripts zur Anzeige des Jahres. Dazu wurde im Script gleich hinter "MonatName2" folgender Code eingefügt:
+ " " + DiesesJahr4stellig)
Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum

  JavaScript-Code-Schnipsel für dieses Modul

Avatar Mit JavaScript haben Sie Einfluss auf das im Browserfenster angezeigte HTML-Dokument und die Möglichkeit, auf Benutzeraktionen zu reagieren. Inhalte können errechnet, gefiltert, abgefragt und die Darstellung der Seite kann auch nach dem Laden noch verändert werden. Einige der in diesem Modul verwendeten Techniken sehen sie hier als Code-Schnipsel. Im Quelltext der Demo-Datei (Link weiter unten) können sie den gesamten Zusammenhang erkennen.


function TagTxt (TagNummer) {
const Tag=new Array();
Tag[0]="Sonntag";
Tag[1]="Montag";
Tag[2]="Dienstag";
Tag[3]="Mittwoch";
Tag[4]="Donnerstag";
Tag[5]="Freitag";
Tag[6]="Samstag";
return Tag[TagNummer];
}

function MonatLang(x) {
const Monat=new Array();
Monat[1]="Januar";
Monat[2]="Februar";
Monat[3]="März";
Monat[4]="Aprl";
Monat[5]="Mai";
Monat[6]="Juni";
Monat[7]="Juli";
Monat[8]="August";
Monat[9]="September";
Monat[10]="Oktober";
Monat[11]="November";
Monat[12]="Dezember";
return Monat[x];
}

let KalDatum = new Date();
let DieserMonatstag = KalDatum.getDate();
let DieserWochentag = KalDatum.getDay();
let DieserMonatNummmer = KalDatum.getMonth()+1;
let DiesesJahr4stellig = KalDatum.getFullYear();
let TagName = TagTxt(DieserWochentag);
let MonatName2 = MonatLang(DieserMonatNummmer);

function KalenderBlatt2A() {
document.write('<div id="Kal2A"><span class="Kal2AWtag">' + TagName + '<\/span><span class="Kal2ATag">' + DieserMonatstag + '<\/span><span class="Kal2AMonatJahr">' + MonatName2 + '<\/span><\/div>');
return
}

Demo - Darstellung eines MINI-Kalenderblatts zur Datumsanzeige

Avatar Sie können die Demo-Datei speichern und das Beispiel für ihren Zweck anpassen. Oder sie öffnen die Demo und lassen sich den Quellcode zum Kopieren anzeigen: Rechtsklick in die Seite und im Kontextmenü "Seitenquelltext anzeigen" auswählen. Ich verwende bei meinen Modulen eigene CSS-Klassen zur Positionierung und / oder Formatierung, die im Head-Bereich notiert sind. Der JavaScript-Code für diese Lösungsvariante ist innerhalb einer JavaScript-Deklaration im Head-Bereich notiert.

  12 Grafiken zum Download für ihre Experimente

Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum
Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum Mini-Kalenderblatt Datum

Demnächst ...


Avatar Auf weiteren Seiten in der Rubrik Datum möchte ich demnächst an Beispielen erklären, wie häufig eingesetzte Rechenoperationen mit dem Date()-Objekt in JavaScript gelöst werden. Interessant sind auch die Erweiterungen in JavaScript. Seit einigen Jahren stehen neue Möglichkeiten zum Extrahieren von Informationen und zur Darstellung von Datumsformaten zur Verfügung, die den internationalen, aber für uns wichtig, der deutschen Schreibweise des Datums entsprechen.

Unten angekommen!

Sie sind unten angekommen aber wahrscheinlich nicht dorthin, wo Ihr eigentliches Ziel war.

  Kaffeepause
  Impressum
  Datenschutz
  Webmaster

Lesenswert

Das könnte Sie auch interessieren. Verweise auf Seiten zu ähnlichen Themen in dieser Unterrubrik.

  nach oben
  vorherige Seite
  nächste Seite
  Home

Mini-Kalenderblatt Datum anzeigen

Keywords

Datum Kalenderblatt anzeigen Date() new Date() getDay() getFullYear() Anzeige Wochentag Datumswert Array zeitverzögert setTimeout() CSS-Klassen JavaScript Script-Code Vorlagen Beispiel Modul