einfachen Kalender einbauen

Findet ihr solche Javascript-Kalender auch so cool?

Das Tutorial, bzw. das Script stammt von Dynamic Drive.com; gehört mir also nicht! Ich habe es nur ins deutsche übersetzt, sodass es für euch hoffentlich einfacher zu verwenden ist.

1. Füge folgenden Code in den head-Bereich deiner Homepage ein:
<br /><br /> <style type=“text/css“><br /> <p>.main {<br /><br /> width:200px;<br /><br /> border:1px solid black;<br /><br /> }</p><br /> <p>.month {<br /><br /> background-color:black;<br /><br /> font:bold 12px verdana;<br /><br /> color:white;<br /><br /> }</p><br /> <p>.daysofweek {<br /><br /> background-color:gray;<br /><br /> font:bold 12px verdana;<br /><br /> color:white;<br /><br /> }</p><br /> <p>.days {<br /><br /> font-size: 12px;<br /><br /> font-family:verdana;<br /><br /> color:black;<br /><br /> background-color: lightyellow;<br /><br /> padding: 2px;<br /><br /> }</p><br /> <p>.days #today{<br /><br /> font-weight: bold;<br /><br /> color: red;<br /><br /> }</p><br /> </style><br /> <p><script type=“text/javascript“ src=“basiccalendar.js“></p> <p>/***********************************************<br /> * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/<br /> * Script featured on Dynamic Drive (http://www.dynamicdrive.com)<br /> * This notice must stay intact for use<br /> * Visit http://www.dynamicdrive.com/ for full source code<br /> ***********************************************/</p> <p></script>

2. Wenn du möchtest, kannst du noch Anpassungen am CSS des obigen Codes vornehmen und beispielsweise Farben und Schriftarten anpassen.

3. Lade dir nun die Datei basiccalendar.js herunter (Rechtsklick -> Speichern unter). Diese Datei brauchst du unbedingt, da sie dafür sorgt, dass das Kalender-Script funktioniert.
Lade sie auf deinen Webspace hoch.

4. Der nächste Code muss dort eingebaut werden, wo dein Kalender später angezeigt werden soll:
<script type=“text/javascript“></p> <p>var todaydate=new Date()<br /> var curmonth=todaydate.getMonth()+1 //get current month (1-12)<br /> var curyear=todaydate.getFullYear() //get current year</p> <p>document.write(buildCal(curmonth ,curyear, „main“, „month“, „daysofweek“, „days“, 1));<br /> </script>

Anmerkung/Erklärung: Der Kalender nutzt eine Schlüssel-Funktion, damit er angezeigt werden kann. So sieht diese Funktion aus:

buildCal(4, 2003, „main“, „month“, „daysofweek“, „days“, 0)

Folgendermaßen setzt sich die Funktion zusammen. Verändere diese Dinge, je nachdem wie du sie brauchst:
4 Das ist der Monat, der angezeigt wird. 1 = Januar, 12 = Dezember
2003 Das Jahr, das angezeigt wird.
main, month, daysofweek, days sind alles entsprechende CSS-Klassen im Style des obersten Codes
0 bezeichnet die Rahmenbreite zwischen den Zellen. In diesem Fall haben die Zellen keinen Rahmen.

Feedback, Fragen?