 Mini-Kalenderblatt 01-B Datumseintrag - eigene Termine
Ein MINI-Kalenderblatt z.B. als EyeCatcher, ausschließlich für fixe Termine. Anzeige der vierstelligen Jahreszahl, des Kalendertages und des Monatsnamens.
|
|
Minikalenderblatt mit Übergabe von 3 Werten (mit Hintergrundgrafik)
 Festlegung der Schrifttype (Info lesen)
Codeschnipsel zur Darstellung eines Kalendertages / Datums. Geeignet als Eycatcher für Terminlisten ihrer Webseite. Über 3 Variablenwerte kann die Anzeige der Datumswerte für das Mini-Kalenderblatt jedes mal neu festgelegt werden.
|
Im Gegensatz zum Script-Beispiel des Mini-Kalenderblatts 01 (zeigt immer das aktulle Datum) werden hier die 3 Datumsinformationen der Funktion beim Aufruf als Parameter übergeben. Ein Kalenderblatt als Blickfang für den Mehrfacheinsatz innerhalb ihrer Seiten, z.B. für eine Terminliste. |
|
|
Beispiel einer statischen Terminliste
Eine dynamische Terminliste finden sie unter  Terminliste 10
Ein JavaScript übernimmt hier die mehrfache Anzeige des Minikalenderblatts mit unterschiedlichen Datumsanzeigen. Das anzuzeigende Datum wird der Funktion jedesmal beim Aufruf übergeben.
|
Ausflug der Jugendabteilungen des TuS 09
Fahrt zum Freizeitpark 'de Efteling', Niederlande
Abfahrt: 8 Uhr am Vereinsheim, Busfahrer: Jupp ZUpp (fährt pünktlich ab)
|
|
Vorstandssitzung TuS 09 Rot-Weiß Frelenberg
Seminarraum Gaststätte Meier, Geilenkirchen
Beginn: 20 Uhr (Zuspätkommer müssen Nachsitzen)
|
|
Freundschaftsspiel Senioren
TuS 09 Rot-Weiß Frelenberg - Alemania Aachen II
Sportplatz am Wiesengrund, Beginn: 16 Uhr
|
|
Weiterbildung für Jungschiedrichter
Pflichtveranstaltung für die jährliche Lizenzverlängerung
Ort: Vereinsheim, Referent: Jupp Zupp, Beginn: 19 Uhr
|
Blaue Hintergrundgrafik in dieser Terminliste: minikal14.gif
Aufruf der Funktion
Beim Aufruf der Funktion werden die 3 Werte für die Anzeige übergeben. So kann das Mini-Kalenderblatt innerhalb ihrer Seite mehrmals mit unterschiedlichen Datumseinträgen verwendet werden. Das Kalenderblatt wird in ihrer HTML-Seite an genau der Stelle angezeigt, wo sie den JavaScript-Aufruf für die Funktion eintragen.
<script type="text/javascript" language="JavaScript">
<!--
MiniKalender01Fix("23","Dezember","2008");
//-->
</script>
Formatierung
Mit 4 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 JahrFarbe = "#FFFFFF";
var TagFarbe = "#5491F2";
var MonatFarbe = "#5491F2";
var Hintergrund = "minikal14.gif";
Aufwand für die Einbindung
1) Zwei Grafiken downloaden
2) Scriptcode im Head notieren
3) Funktionsaufruf im Body notieren
4) Hintergrundgrafik festlegen
5) Farben festlegen
|
minikal14.gif
|
transpixel.gif
|
 Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'
Info zum Update 'Schrifttypen'
17.06.2008, Festlegung der Schrifttype
Unterschiedliche Schrifttypen werden, wenn auch mit nur geringen Abweichungen, oft unterschiedlich groß dargestellt. Das würde die Darstellung der kalenders verfälschen.
Falls sie auf ihrer Seite eine andere Schrifttype als Arial verwenden, wird mit dieser CSS-Anweisung sichergestellt, dass die Schriftgrößen zur Größe des Minikalenders passt. Schließlich werden die unterschiedlichen Schrifttypen nicht immer in gleicher Größe angezeigt, selbst wenn sie mit CSS in identischer Pixelhöhe notiert wurden.
Beispiele für unterschiedliche Anzeigen mit identischer Pixelhöhe:
|
|
|
|
|
|
| Arial |
Lucida Grande |
monospace |
Helvetica |
Times |
Um solchen Unterschieden in der Anzeige vorzubeugen, habe ich nun die Schrifttype über eine CSS-Klasse mit 'font-family' auf Arial festgelegt, vertikale Abstände und Textgrößen entsprechend festgelegt.
Beispiele der Darstellung
Wie sie beim zweiten Kalenderblatt sehen, kann man auch ein wenig mogeln und statt der Jahreszahl den Wochentag eintragen.
Beispiel für den Einsatz
Car-Display - Autohaus Jupp Zupp
Wir möchten sie am 10. August um 10 Uhr zu unserer Sommerausstellung herzlich einladen. Bitte das Datum vormerken.
|
|
Vorstandssitzung SV Geilenkirchen
Die Vorstandsmitglieder und Abteilungsleiter Freizeit und Radsport treffen sich am 18. Oktober um 20 Uhr in der Gaststätte Kuhlmanns. |
|
Vogelschau in Geilenkirchen
Am 16. Oktober von 10 Uhr bis 18 Uhr zeigt der Zuchtverein für Exoten die preisgekrönten Federviecher in der Gaststätte Wildkatze. |
|
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 |
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 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 • Datum • Kalenderblatt 01-B
Demo
