Kalenderblatt 01-A aktuelles Datum

Darstellung eines Kalenderblatts zur Datumsanzeige

Das aktuelle Datum wird als Abreißkalender dargestellt. In diesem Modul wird lediglich der Monat als Kurztext und der Monatstag angezeigt. Auf andere Funktionen verzichte ich bei diesem Grundmodul. Andere Varianten erlauben die Übergabe eines fixen Datums oder zeigen unterhalb des Kalenderblatts zusätzlich einen von mehreren (uhrzeitabhängigen) Begrüßungstexten.

Rubrik Datum

Kalenderblatt mit aktuellen Datumswerten. 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 mit eigenen CSS-Klassen festgelegt. Wenn sie eine selbst erstellte Hintergrundgrafik oder eine meiner Vorlagen verwenden, die ich weiter unten zum Download anbiete, kann das Mini-Kalenderblatt farblich angepasst werden. Auch die Auswahl einer anderen Schrifttype, Textfarbe und Schriftgröße in den CSS-Anweisungen verändert das Erscheinungsbild. 12 Hintergrundgrafiken zum Download finden sie weiter unten.

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 MonatLang(x) {
const Monat=new Array();
Monat[1]="Jan";
Monat[2]="Feb";
Monat[3]="Mär";
Monat[4]="Apr";
Monat[5]="Mai";
Monat[6]="Jun";
Monat[7]="Jul";
Monat[8]="Aug";
Monat[9]="Sep";
Monat[10]="Okt";
Monat[11]="Nov";
Monat[12]="Dez";
return Monat[x];
}

let KalDatum = new Date();
let DieserMonatstag = KalDatum.getDate();
let DieserMonatNummmer = KalDatum.getMonth()+1;
let MonatName2 = MonatLang(DieserMonatNummmer);

function KalenderBlatt1A() {
document.write('<div id="Kal1A"><span class="Kal1AMonat">' + MonatName3 + '<\/span><span class="Kal1ATag">' + DieserMonatstag + '<\/span><\/div>');
return
}

Demo - Darstellung eines MINI-Kalenderblatts zur Datumsanzeige

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

Demnächst ...

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!

Diesmal nicht gefunden was sie suchten? Kommen sie doch später noch mal vorbei.

Kaffeepause
Impressum
Datenschutz
Webmaster

Sitemap

Übersicht mit Verweisen zu den Unterseiten die bereits überarbeitet wurden Sitemap

nach oben
vorherige Seite
Sitemap
Home

Keywords

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