Mini-Kalenderblatt 03
 HomeDatum • Kalenderblatt 03 Demo1  Demo2  Demo3  Quellcode 

Kalenderblatt 03 optional mit Infotext   (ohne Grafik)

Darstellung eines MINI-Kalenderblatts und eines tageszeitabhängigen Textes (7 Optionen) für Ihre Webseite. Das (aktuelle) Datum wird als Abreißkalender dargestellt, darunter wird der Kurztext eingeblendet. Die Anzeige eines fixen Datums ist mit diesem Modul ebenfalls möglich.
kalenderblatt datum monat tag jahr funktion texte

Minikalenderblatt CSS-formatiert (ohne Grafik) + 7 zeitabhängige Texte

UPDATE  Funktion, CSS-Formatierungen, Datumseintrag in herkömmlicher Schreibweise

Kalenderblatt ohne Hintergrundgrafik Wochentag, Monatstag, Monat, Jahr

Bei diesem Modul tritt der uhrzeitabhängie Text in den Hintergrund, ist aber wichtiger Bestandteil der Darstellung. Die Zusättzliche Anzeige des datums in Form eines Kalenderblatts zeigt dem Seitenbesucher die Aktuallität. Obwohl der Haupt-Text in der Box (siehe Screenshot 'Klima und Heizung Meier') immer gleich ist, wird unterhalb des kalenders ein kurzer zeitabhängiger Text (hier die Service-Telefonnummer) angezeigt. In der simpelsten Form während der Bürozeiten die Büro-Nummer, außerhalb der Bürozeiten die Mobilfunk-Nummer.

Kalenderblatt ohne Hintergrundgrafik Wochentag, Monatstag, Monat, Jahr



Mini-Kalenderblatt Wochentag, Monatstag, Monat, Jahr und zeitabhängiger Text Codeschnipsel zur Darstellung des aktuellen Kalendertages oder eines fixen Datums. Das Kalenderblatt-Modul bietet bei der Anzeige des aktuellen Datums optional die Einblendung eines kurzen zeitabhängigen Textes, z.B. zur Begrüßung (guten Morgen) oder zur Darstellung von Öffungszeiten / Dienstzeiten (z.B. Hotline).

Darstellungsoptionen:
  1. aktuelles Datum
  2. aktuelles Datum + Text
  3. vorgegebens Datum

Alle Vorarbeiten, die Ihnen die Einbindung erleichtern, habe ich bereits vorgenommen. Sie müssen lediglich das JavaScript in den Head kopieren und die Funktion im Body an der Stelle aufrufen, wo das Kalender-Text-Modul angezeigt werden soll.



Infotexte - zeitabhängige Texte

Optional schreibt das Kalenderscript zu verschiedenen Tageszeiten entsprechende kurze Texte in Ihre Seite, wenn der Parameterwet 'Text' übergeben wird. Abhängig vom Einsatzbereich werden Sie geeignete Texte festlegen und / oder die Uhrzeitvogaben ändern. Hier zwei Demos mit einem Begrüßungstext / der Telefonnummer der Rufbereitschaft:

Wetter heute in Geilenkirchen

Voraussichtlich wird die Sonne leuchten, es ist nicht ganz so kalt, das Ozonloch verschiebt sich ab und an, der Monsunregen wird uns nicht betreffen, Pollenflug möglicherweise in den Blumenhäusern, der Luftdruck wird sich messen lassen, eine Hochwasserwarnung gibt es nur für die betroffenen Gebiete, mit plötzlicher Wetteränderung ist jederzeit zu rechnen. Mit anderen Worten: Alles wird so wie gestern.


 Jupp Zupp Landmaschinen - 24 Stunden für Sie da 

Individuellen Service anzubieten und (besonders während der Entezeit) die Garantie für eine schnelle fachmännische Reparatur vor Ort zu garantieren, ist der Schlüssel unseres Erfolgs. 6 Mechaniker bemühen sich 7 Tage die Woche 24 Std. um das Wohl der Kunden. Rufnummer des dienstbereiten Mechanikers:

012345-12345


00 Uhr - 02 UhrHallo NachteuleNotdienst: 0123-11111
02 Uhr - 03 UhrImmer noch wach?Notdienst: 0123-22222
03 Uhr - 07 UhrGuten MorgenNotdienst: 0123-22222
07 Uhr - 12 UhrMoijn MoijnBüro: 02233-11111
12 Uhr - 17 UhrGuten TagBüro: 02233-11111
17 Uhr - 23 UhrGuten AbendRufbereitschaft: 0123-55555
22 Uhr - 24 UhrGute NachtNotdienst: 0123-666666


function TextSchreiben() {
if (h < 2) KalText = "Hallo Nachteule";
else if (h < 3)  KalText = "Immer noch wach?";
else if (h < 7)  KalText = "Guten Morgen";
else if (h < 12) KalText = "Moin Moin";
else if (h < 17) KalText = "Guten Tag";
else if (h < 22) KalText = "Guten Abend";
else  KalText = "Gute Nacht";
document.write('<p class="TextSchrift">'+KalText+'<\/p>');
return
}



Formatierungen des Mini-Kalenderblatts

Durch Änderungen in den CSS-Angaben können Sie die Farbgebung für die Kalenderdarstellung Ihren Seiten anpassen. Unten aktive Beispiele, Darstellung mit aktuellem Datum:



Für das Mini-Kalenderblatt habe ich den (fingierten *) Rand, die Hintergrundfarbe und sämtliche Textformatierungen über CSS-Klassen festgelegt. So können Sie Ihre favorisierten Farben an zentraler Stelle eintragen. Dazu wurden 4 CSS-Klassen eingerichtet:

.Kal, .KalWTag, .KalTag, .KalMonatJahr

Kalenderblatt Minikalender Tagesdatum

Der Begüßungstext wird ebenfalls durch CSS-Angaben (im Head-Bereich) formatiert.
Sie können die Größe des Kalenders über CSS-Angaben verändern: Demo

fingiert *   Bei den CSS-Formatierungen würden Randeinstellungen in den Browsern unterschiedlich dargestellt werden bzw. zu unterschiedlichen Größen führen. Um das zu vermeiden habe ich nicht wirkich Randeinstellungen vorgesehen sondern stelle unterschiedlich eingefärbte Layer (.KalI1, .KalI2) mit einem Versatz übereinander dar.

Den Versatz und damit die 'Randbreite' kann man einstellen. Betrachten Sie die Demo3 mit Einstellungen für 5 Pixel.

Nur nebenbei bemerkt:

Den 'fingierten Rand', der in Wirklichkeit aus zwei Layern besteht, habe ich lediglich vorgesehen um ein Kalenderblatt mit Rand darzustellen, ohne dabei eine Hintergrundgrafik einzusetzen. Schließlich war das die Absicht bei diesem Modul: Mini-Kalenderblatt ohne Grafik.

Mit Hintergrundgrafik (die einen Rand hat) kann man auf diese beiden Layer verzichten. Dann aber würde ich gleich eine attraktive Variante einer Grafik wählen. Siehe Beispiel rechts.

Modul Kalenderblatt03-A (240 x 250)



Aufwand für den Webmaster

1) Scriptcode im Head notieren (siehe Textdatei)
2) CSS-Code im Head notieren (siehe Textdatei)
3) Funktionsaufruf im Body notieren (siehe unten)

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'



Aufruf der Funktion 'KalenderBlatt03()'

Das Kalenderblatt erscheint innerhalb ihrer Seite genau dort, wo der Aufruf der Funktion notiert wurde. Das Modul bietet 3 unterschiedliche Anzeigeoptionen.
  1. Aufruf der Funktion zur Anzeige des aktuellen Datums
  2. Aufruf der Funktion zur Anzeige des aktuellen Datums + Text
  3. Aufruf der Funktion zur Anzeige eines vorgegeben Datums

a)  Notierung im Body-Bereich - aktuelles Datum

Zur Anzeige des Mini-Kalenderblatts mit aktuellem Datum werden keine Parameter übergeben. Die runden Klammern hinter dem Funktionsnamen bleiben leer.
<script type="text/javascript" language="JavaScript">
<!--
KalenderBlatt03();
//-->
</script>





b)  Notierung im Body-Bereich - aktuelles Datum + Zeittext

Soll unterhalb des Kalenderblatts die Textanzeige eingeblendet werden, übergeben Sie der Funktion 'KalenderBlatt03' den Parameterwert 'Text'. Innerhalb der runden Klammern steht "Text".
<script type="text/javascript" language="JavaScript">
<!--
KalenderBlatt03("Text");
//-->
</script>



Optionale Darstellung mit fixem Datum

Sie können mit diesem Modul auch ein fixes Datum anzeigen lassen. Diese Option wird dann interessant, wenn der Minikalender nicht zur Begrüßung sondern als Blickfang für einen Event oder Terminliste eingesetzt wird. Darstellung mit fixem Datum (z.B. für einen Events oder das letzte Update):

Für die Anzeige eines fixen Datums habe ich eine zusätzliche Option vorgesehen. Sollten Sie innerhalb Ihrer Seite neben dem Kalenderblatt mit aktuellem Datum weitere Kalenderblätter mit fixem Datum anzeigen wollen, bleiben Sie so beim gleichen Layout (die Kalender sehen identisch aus). Der Funktion wird das Datum als Text (Anführungszeichen) in herkömmlicher Schreibweise als Parameter übergeben.


c)  Notierung im Body-Bereich - fixes Datum

Zur Anzeige des Mini-Kalenderblatts mit fixem Datum werden die Datumswerte als Parameter übergeben. Innerhalb der runden Klammern steht ein gültiger Datumswert. Format: "TT.MM.JJJJ"
<script type="text/javascript" language="JavaScript">
<!--
KalenderBlatt03("23.10.2013");
//-->
</script>




Beispiel als Terminliste

Sie können das Mini-Kalenderblatt auch für Ihre Terminlisten einsetzen. Das Mini-Kalenderblatt dient dabei als 'Eyecatcher'. Dabei legen Sie für die einzelnen Termine das anzuzeigende Datum fest.

Autoausstellung Geilenkirchen
In Genf vorgestellt, in Geilenkirchen bewundern?Das Zentrum der City wird wieder zum Treffpunkt aller Auto-Interessierten. Die Autohäuser der Region werden ihre neuesten Modelle auffahren, über zeitgemäße umweltfreundliche Technik informieren und zum Probesitzen einladen.


Pfingstmarkt Geilenkirchen
Wie jedes Jahr am Pfingstwochenende, findet am kommenden Wochenende der 'Pfingstmarkt' statt. Eröffnet wird der Pfingstmarkt am Freitag. In Verbindung mit der Kirmes der Schützenbruderscaft locken Fahrgeschäfte nicht nur Geilenkirchener Bürger in die Stadt.


Radwandertag
Der 22. Niederrheinische Radwandertag zwischen Maas und Rhein. Die Pedalritter können ab 10 Uhr zwischen 63 Rundtouren wählen. Das gesamte Streckennetz von ca. 3000 Kilometern ist zum Teil von fleißigen Helfern markiert worden.






CSS-Angaben für das Kalenderblatt

Textformatierungen für den zeitabhängigen Text und Farbeinstellungen des Kalenders:

Randfarbe
Kalenderfarbe Hintergrund
Textfarbe Wochentagsname
Textfarbe Tagesziffer(n)
Textfarbe Monat Jahr
<style type="text/css">
<!--

.Kal {
position: relative;
left: 0px;
top: 0px;
width: 70px;
height: 80px;
background-color: #000000;
}

.KalI01 {
position: absolute;
left: 1px;
top: 1px;
width: 68px;
height: 78px;
background-color: #FFFFFF;
}

.KalI02 {
position: absolute;
left: 1px;
top: 1px;
width: 66px;
height: 76px;
background-color: #DF0000;
}

.KalWtag {
position: absolute;
left: 0px;
top: 5px;
width: 66px;
height: 11px;
text-align: center;
margin: 0px;
font-family: Verdana,sans-serif;
font-size: 11px;
font-weight: normal;
color: #EFEFEF;
}

.KalTag {
position: absolute;
left: 0px;
top: 24px;
width: 66px;
margin: 0px;
font-family: Arial,sans-serif;
font-size: 32px;
line-height: 101%;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}

.KalMonatJahr {
position: absolute;
left: 0px;
top: 56px;
width: 66px;
height: 12px;
margin: 0px;
font-family: Verdana,sans-serif;
font-size: 10px;
color: #EFEFEF;
text-align: center;
}

/* Begrüßungstext */
.TextSchrift {
font-family: Arial,sans-serif;
font-size: 12px;
color: #2F2F2F;
}

-->
</style>






Das könnte Sie auch interessieren: