Mini Kalender

Scripte > Daytime

Einfache kleine Mini Kalender für die Homepage

Hier haben wir einige kleine Kalender zum Download bereit gestellt. Es ist bestimmt für jeden etwas dabei, ob PHP oder Javascript, alles im Mini-Format. Die aktuellen Tage werden angezeigt bzw. farblich hervor gehoben. Diese können der Homepage im HTML-Code selbst oder in der zugehörgen CSS-Datei "kalender.css" angepasst werden.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. In der ZIP-Datei befinden sich alle Kalender sowie auch die Image-Datei "kalender_leer.png".

HEAD-Code wenn vorhanden in den HEAD-Bereich <head>....</head> und HTML-Code in den BODY-Bereich <body>....</body> der aufrufende Datei einfügen.

Eine demo.html bzw. demo.php ist bei jedem Script beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

In der PHP-Version muss die ausführende Datei die Dateiendung .php aufweisen.

Aufruf: "http://www.domain.tld/demo.html" bzw. "http://www.domain.tld/demo.php".

x runter geladen

PHP Tages-Kalender

Javascript Monats-Kalender

Monday

Code PHP Tages-Kalender:

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<div class="Obj74_cal">

<div class="Obj74_wot"><?php echo date("l"); ?></div>
<div class="Obj74_num"><?php echo date("d"); ?></div>

</div>

</div>

mit Verlinkung der Tageszahl:

<div class="Obj74_cal">

<div class="Obj74_wot"><?php echo date("l"); ?></div>
<div class="Obj74_num"><a href="seite.html"><?php echo date("d"); ?></a></div>

</div>

</div>

Nach dem <BODY> Tag

Code Datei "kalender.css"

.Obj74_cal {

width: 210px;
height: 178px;
font-family: Comic Sans MS;
text-align: center;
background-image: url(kalender_leer.png);
background-repeat: no-repeat;
}

.Obj74_wot { font-size: 28px; color: #000; font-weight: bold; padding-top: 36px; }

.Obj74_num { font-size: 60px; color: #f00; font-weight: bold; padding-top: 0px; text-decoration: none; }

Code Javascript Monats-Kalender:

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<script>
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 2000) 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 ("M","D","M","D","F","S","S");
var KFarbe = "#000000";     /* Schriftfarbe Kalenderkopf */
var TFarbe = "#0000FF";     /* Schriftfarbe Tagesanzeige */
var HFarbe = "#FF9900";     /* Schriftfarbe Heuteanzeige */
var SFarbe = "#E00000";     /* Schriftfarbe für Sonntage */
var jetzt = new Date();
var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 2000) 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) {
AnzTage=-3;
if(Jahr%4==0) Stop++;
if(Jahr%100==0) Stop--;
if(Jahr%400==0) Stop++;
}
document.write("<table class='Obj74_tbl'>");
document.write("<td class='Obj74_cel' align=center colspan=7 valign=middle>");
</div>
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,KFarbe);
var Tageszahl = 1;
for(i=0;i<=5;i++) {
document.write("<tr>");
for(j=0;j<=5;j++) {
if((i==0)&&(j < Start))
SchreibeZelle(" ",TFarbe);
else {
if(Tageszahl > Stop)
SchreibeZelle(" ",TFarbe);
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
SchreibeZelle(Tageszahl,HFarbe);
else
SchreibeZelle(Tageszahl,TFarbe);
Tageszahl++;
}
}
}
if(Tageszahl > Stop)
SchreibeZelle(" ",SFarbe);
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
SchreibeZelle(Tageszahl,SFarbe);
else
SchreibeZelle(Tageszahl,SFarbe);
Tageszahl++;
}
document.write("</tr>");
}
document.write("</table>");
}
function SchreibeKopf(Monatstitel,KFarbe) {
document.write("<tr>");
document.write('<font color='+KFarbe+'><b>');
document.write(Monatstitel);
document.write("</b></font></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
SchreibeZelle(Tag[i],KFarbe);
document.write("</tr>");
}
function SchreibeZelle(Inhalt,TFarbe) {
document.write("<td class='Obj74_cel' align=center valign=middle>");
document.write('<font color='+TFarbe+'><b>');
document.write(Inhalt);
document.write("</b></font></td>");
}
</script>

Nach dem <BODY> Tag

Code Datei "kalender.css"

.Obj74_tbl { border: 2px solid #000; background-color: #D0F0F0; }

.Obj74_cel {

font-family: arial;
font-size: 10px;
font-weight: normal;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 6px;
border: 1px solid #A6A6A6;
margin: 1px;
}

» nach oben «