 Mini-Kalenderblatt 01
Darstellungen des Datums in unterschiedlichen Schreibweisen kennen sie. Wie wärs mit einem MINI-Kalenderblatt für ihre Internetseite? Sie haben die Wahl zwischen dem aktuellen Datum oder einem Datum, das sie selbst festlegen.
Ich habe ein wenig gewerkelt. Alle Vorarbeiten, die ihnen die Einbindung erleichtern, habe ich bereits erledigt. Sie müssen lediglich das JavaScript in den Head kopieren und die Funktion im Body aufrufen.
Ihre favorisierten Farben können sie in Variablen an zentraler Stelle eintragen. Dazu können sie die Hintergrundgrafik und 2 Farbwerte festlegen. |
|
|
Beispiele der Darstellung mit altuellem Datum
Beispiel für den Einsatz mit fixem Datum
Statt das aktuelle Datum von einem JavaScript errrechnen zu lassen, können sie auch ein fixes Datum vorgeben.
Jugendabteilung TuS 09 Frelenberg
Wir möchten alle Kinder und Jugendlichen zu unserer Nikolausfeier am 10. Dezember um 18 Uhr herzlich einladen. Bitte das Datum vormerken.
|
|
Formatierung
Mit 3 Einträgen für die Variablen im JavaScript, können sie ihren Kalender an das Layout der Webseite anpassen. Laden sie die passende Grafik herunter (siehe unten) und tragen den Namen der Grafik plus die beiden Farbwerte für Monatsname und Tag ein.
var TagFarbe = "#9FCC78";
var MonatFarbe = "#FFFFFF";
var Hintergrund = "minikal01.gif";
Beispiel für den Einsatz mit fixem Datum
Jugendabteilung TuS 09 Frelenberg
Wir möchten alle Kinder und Jugendlichen zu unserer Nikolausfeier am 10. Dezember um 18 Uhr herzlich einladen. Bitte das Datum vormerken.
|
|
Die Hintergrundgrafiken und Grundfarben
Sie können eigene Hintergrundgrafiken entwerfen oder aber eine Grafik aus meiner Vorlagensammlung verwenden. Die Grafiken haben die Abmessungen 70 x 60 Pixel und decken sich mit der Größe der Tabelle, in der dieser Kalender dargestellt wird. Laden sie die gewünschte Grafik herunter!
 |
 |
 |
 |
 |
| #9CCB75 |
#F28156 |
#F25781 |
#5A95F3 |
#9D56F2 |
| minikal01.gif |
minikal02.gif |
minikal03.gif |
minikal04.gif |
minikal05.gif |
| |
 |
 |
 |
 |
 |
| #F2AC52 |
#F2D956 |
#DFF252 |
#92E53A |
#52D4ED |
| minikal06.gif |
minikal07.gif |
minikal08.gif |
minikal09.gif |
minikal10.gif |
| |
 |
 |
 |
 |
 |
| #9CCB75 |
#F28156 |
#F25781 |
#5A95F3 |
#9D56F2 |
| minikal11.gif |
minikal12.gif |
minikal13.gif |
minikal14.gif |
minikal15.gif |
| |
 |
 |
 |
 |
 |
| #F2AC52 |
#F2D956 |
#DFF252 |
#92E53A |
#52D4ED |
| minikal16.gif |
minikal17.gif |
minikal18.gif |
minikal19.gif |
minikal20.gif |
| |
 |
 |
 |
 |
 |
| #6D6D6D |
#6D6D6D |
#9F9F9F |
#9F9F9F |
#D4D4D4 |
| minikal21.gif |
minikal22.gif |
minikal23.gif |
minikal24.gif |
minikal25.gif |
Aufwand für die Einbindung
1) Zwei Grafiken downloaden
1) Scriptcode im Head notieren
2) Funktionsaufruf im Body notieren
3) Hintergrundgrafik festlegen
4) Farben festlegen
5) (einsatzbedingt) fixes Datum eintragen
6) testen Datum verstellen
Info einblenden 
|
minikal01.gif
|
transpixel.gif
|
 Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'
Funktionsaufruf im Body
Im Body ihres HTML-Dokuments wird das Kalenderblatt an genau der Stelle angezeigt, wo sie den JavaScript-Aufruf für die Funktion eintragen.
<script type="text/javascript" language="JavaScript">
<!--
MiniKalender01();
//-->
</script>
Aktuelles oder fixes Datum?
Sie haben die Wahl zwischen dem aktuellen Datum oder einem Datum, das sie selbst festlegen. Wählen sie eine der beiden Eintragungen im JavaScript oder deaktiviren die nicht gewählte durch 2 vorangestellte Slashes ( // ).
1) für das aktuelle Datum
var Heute=new Date();
2) für ein festgelegtes Datum mit entsprechendem Eintrag
var Heute = new Date("February 23, 2007 12:00:00");
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 02 - Darstellung von Jahreszahl, Monatsnamen Wochentag und der Tageszahl mit Anpassungsmöglichkeiten für die Farbgebung, finden sie auf der Seite
Mini-kalenderblatt 02
Mini-Kalenderblatt 03 - Darstellung von Jahreszahl, Monatsnamen Wochentag und der Tageszahl mit Anpassungsmöglichkeiten für die Farbgebung, zusätzlich mit einen tageszeitabhängigen Begrüßungstext finden sie auf der Seite
Mini-kalenderblatt 03
|
HOME
Quellcode 
ZURÜCK 
