 Kalenderblatt 03 mit Begrüßungstext (ohne Grafiken)
Darstellung eines MINI-Kalenderblatts und einer tageszeitabhängigen Begrüßung (7 Texte) für ihre Startseite. Das (aktuelle) Datum wird als Abreißkalender dargestellt, darunter wird der Begrüßungstext eingeblendet.
|
|
Minikalenderblatt CSS-formatiert + 7 zeitabhängige Texte - ohne Grafiken
UPDATE 24.07.2010 sämtliche Formatiereungen über CSS-Klassen
Codeschnipsel zur Darstellung des aktuellen Kalendertages in Kombination mit einem zeitabhängig unterschiedlichem Text innerhalb ihrer Webseite.
Rechts sehen sie den aktiven Kalender
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 aufrufen.
Für das Mini-Kalenderblatt habe ich den 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:
.Kalender, .Wochentag, .MonatJahr, .Tageszahl
Der Begüßungstext wird ebenfalls durch CSS-Angaben (im Head-Bereich) formatiert.
|
|
|
Sie können auch die Größe des Kalenders über CSS-Angaben verändern: Demo 
Aufwand zur Einbindung
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'
Das Kalenderblatt erscheint innerhalb ihrer Seite genau dort, wo der Aufruf der Funktion notiert wurde:
<script type="text/javascript" language="JavaScript">
<!--
Begruessung03();
//-->
</script>
Beispiele der Darstellung
Durch Änderungen in den CSS-Angaben können Sie die Farbgebung für die Kalenderdarstellung Ihren Seiten anpassen.
aktuelles Datum ja / nein
Sie können das aktuelle Datum oder ein fixes Datum anzeigen lassen. Diese Option wird dann interessant, wenn der Minikalender nicht zur Begrüßung sondern für einen Event mit unterschiedlichen Texten verwendet wird.
DatumAktuell = "ja";
if(DatumAktuell == "ja")
{
var KalDatum = new Date();
}
else
{
// Werte fixes Datum eintragen
var KalDatum = new Date("February 23, 2010 10:00:00");
}
Begrüßungstexte
Zu verschiedenen Tageszeiten, schreibt das Kalenderscript entsprechende Begrüßungen in ihre Seite. Der Kalender ist variabel. Einstellbar sind natürlich nicht nur die Zeitwerte sondern auch die entsprechend eingeblendeten Texte.
Zur Zeit:
|
00 Uhr - 02 Uhr
|
Hallo Nachteule
|
|
02 Uhr - 03 Uhr
|
Immer noch wach?
|
|
03 Uhr - 07 Uhr
|
Guten Morgen, alles fit?
|
|
07 Uhr - 12 Uhr
|
Moijn Moijn
|
|
12 Uhr - 17 Uhr
|
Guten Tag
|
|
17 Uhr - 23 Uhr
|
Guten Abend
|
|
23 Uhr - 24 Uhr
|
Der Tag geht zu Ende
|
CSS-Angaben für die Textformatierung
<style type="text/css">
<!--
.Kalender {
border:4px double #C00040;
font-family: Arial,sans-serif;
background-color: #FFE6FF;
width: 75px;
height: 80px;
}
.Wochentag {
font-family: Arial,sans-serif;
font-size:10px;
color: #000000;
}
.MonatJahr{
font-family: Arial,sans-serif;
font-size:10px;
color: #000000;
}
.Tageszahl {
font-family: Arial,sans-serif;
font-size:26px;
font-weight: bold;
color: #C00040;
line-height:34px; /* bestimmt Abstand oben + unten */
}
/* Begrüßungstext */
.TextSchrift {
font-family: Arial,sans-serif;
font-size: 14px;
color: #7F7F7F;
}
-->
</style>
Grundlagen - Grundsätzliche Erklärungen zum date()-Objekt und den Möglichkeiten die Informationen für Datum und Zeit in Scripten weiter zu verarbeiten, finden sie auf der Seite
Datum Einführung 02 - Übersicht
Datum und dynamische Uhrzeit - Die Möglichkeit Datum und Uhrzeit dynamisch anzeigen zu lassen, wobei ein Update jede Sekunde stattfindet, finden sie auf der Seite
Datum und Uhrzeit dynamisch darstellen
aktuelles Datum - Ein weiteres Beispiel der Datumsanzeige mit 6 unterschiedlichen Darstellungsmöglichkeiten, finden sie auf der Seite
Datum als Text einbinden
Mini-Kalenderblatt 01 - Mini-Kalenderblatte 60 x 70 Pixel, Tageszahl und Kurzform des Monatsnamens mit Anpassungsmöglichkeiten für die Farbgebung, finden sie auf der Seite
Mini-Kalenderblatt 01
Mini-Kalenderblatt 01-A - Mini-Kalenderblatte 60 x 70 Pixel, Jahreszahl, Tageszahl und Monatsname mit Anpassungsmöglichkeiten für die Farbgebung, finden sie auf der Seite
Mini-Kalenderblatt 01-A
Mini-Kalenderblatt 02 - Darstellung von Jahreszahl, Monatsnamen Wochentag und der Tageszahl mit Anpassungsmöglichkeiten für die Farbgebung, finden sie auf der Seite
Mini-kalenderblatt 02
|
Home • Datum • Kalenderblatt 03