Tanja's Gifbildli

Bilder, Grafiken, JavaScript, HTML-- Kalender-Tutorial --Bilder, Grafiken, JavaScript, HTML

Um dieses Tutorial nachzubasteln brauchst Du:

- Ein von Dir selbst erstelltes Bild oder ein Fertigbild Deiner Wahl -

- Eine Homepage, auf der Du den Kalender im HTML einbauen kannst -

1--Erstelle zuallererst ein Bild in der Größe 177x177px.. Du kannst das Bild z.B. passend zu den Farben und dem Design Deiner Homepage gestalten.. Oder aber auch komplett anders, Deiner Fantasie sind hier keinerlei Grenzen gesetzt...

Mein Bild welches ich passend zu meiner Page gestaltet habe, schaut nun z.B. so aus:

Solltest Du selbst kein Bild erstellen können, so schnapp Dir einfach ein schönes Fertigbild Deiner Wahl, und verkleinere und/oder beschneide es auf die Größe 177x177px...

2--Speichere Dein 177x177px großes Bild nun als jpg Datei (oder wenn es animiert ist als gif Datei) in einen Ordner Deiner Wahl.. Lade Dein Bild nun auf Deinen Webserver hoch..!!

3--Nun kopierst Du Dir hier den HTML-Code für Deinen Kalender:

<CENTER><TABLE id=table style="BORDER: collapse" bgcolor=#000000 cellSpacing=2 cellPadding=0 border=0> <tr> <td> <CENTER><TABLE id=table1 style="BORDER: collapse" bgcolor=#ffffff cellSpacing=4 cellPadding=0 border=0> <TR> <TD width=1> <IMG src="http://www.tanjas-gifbildli.ch/bild.jpg" border=0 width="177" height="177"></font></TD> <TD width=1> <font color="#000000"> <script type="text/javascript"> var d = new Date(); var dm = d.getMonth() + 1; var dj = d.getYear(); if (dj < 999) dj += 1900; Kalender(dm, dj); function Kalender (Monat, Jahr) { Monatsname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"); var KSchrArt = "Arial"; /* Schriftart Kalenderkopf */ var KSchrGroesse = 2; /* Schriftgroesse 1-7 Kalenderkopf */ var KSchrFarbe = "#000000"; /* Schriftfarbe Kalenderkopf */ var Khgrund = "#ffffff"; /* Hintergrundfarbe Kalenderkopf */ var TSchrArt = "Arial"; /* Schriftart Tagesanzeige */ var TSchrGroesse = 1; /* Schriftgroesse 1-7 Tagesanzeige */ var TSchrFarbe = "#000000"; /* Schriftfarbe Tagesanzeige */ var Thgrund = "#ffffff"; /* Hintergrundfarbe Tagesanzeige */ var SoFarbe = "#808080"; /* Schriftfarbe f. Sonntage */ var Ahgrund = "#C0C0C0"; /* Hintergrundfarbe f. heutigen Tag */ var jetzt = new Date(); var DieserMonat = jetzt.getMonth() + 1; var DiesesJahr = jetzt.getYear(); if (DiesesJahr < 999) DiesesJahr += 1900; var DieserTag = jetzt.getDate(); var Zeit = new Date(Jahr, Monat - 1, 1); var Start = Zeit.getDay(); if (Start > 0) { Start--; } else { Start = 6; } var Stop = 31; if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11) --Stop; if (Monat == 2) { Stop = Stop - 3; if (Jahr % 4 == 0) Stop++; if (Jahr % 100 == 0) Stop--; if (Jahr % 400 == 0) Stop++; } document.write('<table border="0" cellpadding="4" cellspacing="1" bgcolor="#000000" width="177" height="177" align="center">'); var Monatskopf = Monatsname[Monat - 1] + " " + Jahr; SchreibeKopf(Monatskopf, Khgrund, KSchrFarbe, KSchrGroesse, KSchrArt); var Tageszahl = 1; for (var i = 0; i <= 5; i++) { document.write("<tr>"); for (var j = 0; j <= 5; j++) { if ((i == 0) && (j < Start)) { SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { if (Tageszahl > Stop) { SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) { SchreibeZelle(Tageszahl, Ahgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { SchreibeZelle(Tageszahl, Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } Tageszahl++; } } } if (Tageszahl > Stop) { SchreibeZelle(" ", Thgrund, SoFarbe, TSchrGroesse, TSchrArt); } else { if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) { SchreibeZelle(Tageszahl, Ahgrund, SoFarbe, TSchrGroesse, TSchrArt); } else { SchreibeZelle(Tageszahl, Thgrund, SoFarbe, TSchrGroesse, TSchrArt); } Tageszahl++; } document.write("<\/tr>"); } document.write("<\/table>"); } function SchreibeKopf (Monatstitel, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) { document.write("<tr>"); document.write('<td align="center" colspan="7" valign="middle" bgcolor="' + HgFarbe + '">'); document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>'); document.write(Monatstitel); document.write("<\/b><\/font><\/td><\/tr>"); document.write("<tr>"); for (var i = 0; i <= 6; i++) SchreibeZelle(Tag[i], HgFarbe, SchrFarbe, SchrGroesse, SchrArt); document.write("<\/tr>"); } function SchreibeZelle (Inhalt, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) { document.write('<td align="center" valign="middle" bgcolor="' + HgFarbe + '">'); document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>'); document.write(Inhalt); document.write("<\/b><\/font><\/td>"); } </script></font></table> </td> </tr> </table>

Baue diesen Code auf Deiner Homepage im HTML ein, dort wo Dein Kalender erscheinen soll..!!

4--Nun passen wir den HTML-Code noch Deinem Kalender an:

<CENTER><TABLE id=table style="BORDER: collapse" bgcolor=#000000 cellSpacing=2 cellPadding=0 border=0>
<CENTER><TABLE id=table1 style="BORDER: collapse" bgcolor=#ffffff cellSpacing=4 cellPadding=0 border=0>
<IMG src="http://www.tanjas-gifbildli.ch/bild.jpg" border=0 width="177" height="177"></font></TD>
var KSchrFarbe = "#000000"; /* Schriftfarbe - Kalenderkopf */
var Khgrund = "#ffffff"; /* Hintergrundfarbe - Kalenderkopf */
var TSchrFarbe = "#000000"; /* Schriftfarbe - Tagesanzeige */
var Thgrund = "#ffffff"; /* Hintergrundfarbe - Tagesanzeige */
var SoFarbe = "#808080"; /* Schriftfarbe für Sonntage */
var Ahgrund = "#C0C0C0"; /* Hintergrundfarbe für heutigen Tag */
document.write('<table border="0" cellpadding="4" cellspacing="1" bgcolor="#000000" width="177" height="177" align="center">');

Bei #000000 gibst Du eine Farbe für den äußeren Rahmen des Kalenders an.. Bei #ffffff gibst Du eine Farbe für den äußeren Hintergrund des Kalenders an.. Bei http://www.tanjas-gifbildli.ch/bild.jpg gibst Du den genauen Pfad zu Deinem Bild auf Deinem Webserver an, welches Du vorher hochgeladen hast..!! Bei allen Farben die ich GRÜN markiert habe, steht jeweils dabei für was Du eine Farbe angeben musst..!! Bei #000000 gibst Du eine Farbe für den inneren Rahmen des Kalenders an...

5--Das war's auch schon, nun musst Du nur noch die Seite mit Deinem Kalender auf Deinen Webserver hochladen, und fertisch.. Schon hast Du Deinen eigenen Kalender auf Deiner Homepage...