255 lines
11 KiB
JavaScript
255 lines
11 KiB
JavaScript
// der Kalender ist frei positionierbar
|
|
// die verwendete Schrift wird durch die entsprechende style-Anweisung in der html-Datei festgelegt
|
|
|
|
aktuell = new Date();
|
|
tag = aktuell.getDate();
|
|
ganztag = aktuell.getDate();
|
|
tage = aktuell.getDay();
|
|
monat = aktuell.getMonth() + 1;
|
|
monatx = monat
|
|
if (monat <= 9) monatx = "0" + monat
|
|
jahr = aktuell.getYear();
|
|
wochentag = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
|
|
monate = new Array("","Jan.","Feb.","Mär.","Apr.","Mai","Jun.","Jul.","Aug.","Sep.","Okt.","Nov.","Dez.");
|
|
tagezahl = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
|
|
if (jahr < 1900) jahr = jahr +1900; // umrechnen fuer Mozilla
|
|
|
|
werk = "#FFFFFF"; // Hintergrundfarbe fuer Montag bis Freitag
|
|
sams = "#d6dff7"; // Hintergrundfarbe fuer Samstag #FE7E02
|
|
sonn = "#6487DC"; // Hintergrundfarbe fuer Sonntag #FF0000
|
|
|
|
// Pfad fuer Bilder
|
|
zurueck = "kalender/pic/k_back1.gif"; // zurueck (Dreieck links)
|
|
outlook = "kalender/pic/outlook.gif"; // Outlook-Icon
|
|
outlook_grey = "kalender/pic/outlook_grey.gif"; // Outlook-Icon
|
|
vor = "kalender/pic/k_fw1.gif"; // Bild vor (Dreieck rechts)
|
|
now = "kalender/pic/k_now1.gif"; // aktueller Werktag (roter Kringel)
|
|
w_now = "kalender/pic/k_w_now1.gif"; // aktueller Wochenendtag (weisser Kringel)
|
|
|
|
// Hintergrundfarben für Bild heute (roter bzw. weisser Kringel), keine Farbe = Transparenz zum Layer
|
|
atag = "#FFFFFF"; // Mo-Fr
|
|
atag_sa = "#d6dff7"; // Samstag #FE7E02
|
|
atag_so = "#6487DC"; // Sonntag #FF0000
|
|
|
|
titelhg = "#FFFFFF"; // Hintergrundfarbe fuer Kalenderkopf und -fuss
|
|
lhg = "#FFFFFF"; // Hintergrundfarbe fuer Layer bzw. Div, keine Farbe = Transparent zum Hintergrund (bgcolor)
|
|
|
|
titelvg = "#021D68"; // Schriftfarbe fuer Kalenderkopf und -fuss
|
|
monatform = "bold"; // Schriftdicke fuer Kalenderkopf (bold = fett | normal | lighter = dünner)
|
|
datform = "normal"; // Schriftdicke fuer Kalenderfuß Tag (bold = fett | normal | lighter = dünner)
|
|
uhrform = "normal"; // Schriftdicke fuer Kalenderfuß Uhr (bold = fett | normal | lighter = dünner)
|
|
tagfarbe = "#021D68"; // Schriftfarbe fuer Tagesbezeichnungen
|
|
datumfarbe = "#021D68"; // Schriftfarbe fuer Kalendertage
|
|
bord = "0px"; // Rahmendicke in Pixel
|
|
bordfarb = "#1E4584"; // Rahmenfarbe
|
|
pad = "0px 5px 0px 5px"; // Abstand vom Rahmen zum Kalender in Pixel: oben rechts unten links
|
|
|
|
bordnav = "border-bottom:solid #1E4584 1.0pt;" // Rahmenlinie unter Monatsnavigation (Tabellenkopf), leer lassen wenn kein Rahmen erwünscht, ansonsten folgende Syntax verwenden: bordnav = "border-bottom:solid #1E4584 1.0pt;"
|
|
bordmon = "border-top:solid #1E4584 1.0pt;" // Rahmenlinie über Datums- und Uhrzeitanzeige, leer lassen wenn kein Rahmen erwünscht, ansonsten folgende Syntax verwenden: bordmon = "border-top:solid #1E4584 1.0pt;"
|
|
borduhr = ""
|
|
borddatum = ""
|
|
|
|
idname = "monatskalender"; // Name/ID fuer Kalender
|
|
zeitintervall = 60000; // Aktualisierungsintervall von Uhr/Kalender. (1000 = 1 Sekunde | 60000 = 1 Minute)
|
|
|
|
// **************************
|
|
|
|
jtag = tag;
|
|
jmonat = monat;
|
|
jjahr = jahr;
|
|
jsekunde = "";
|
|
jminute = "";
|
|
jstunde = "";
|
|
starttag = 1;
|
|
minute = 0;
|
|
stunde = 0;
|
|
inhalt = "";
|
|
if (tag < 10) ganztag = "0" + String(tag);
|
|
|
|
// **************************
|
|
|
|
ns4 = document.layers;
|
|
ie4 = document.all;
|
|
ns6 = document.getElementById && !document.all;
|
|
var verfahren, posx, posy, aktuellx, aktuelly, kleben;
|
|
|
|
function kalender_schreiben() {
|
|
if(ns4) {
|
|
document.write("<layer name=\""+idname+"\" id=\""+idname+"\" style=\"position:relative;z-index:100;left:0.0pt;top:0.0pt;width:140;padding:"+pad+"; border:"+bord+" solid "+bordfarb+"; background-color: " + lhg + "\"></layer>");
|
|
verfahren = document.layers[idname];
|
|
}
|
|
else {
|
|
document.write("<div id=\"" + idname + "\" style=\"position:relative;z-index:100;left:0.0pt;top:0.0pt;padding:"+pad+"; border:"+bord+" solid "+bordfarb+"; background-color: " + lhg + "\"></div>");
|
|
if (ie4 || ns6) verfahren = ns6? document.getElementById(idname) : document.all[idname];
|
|
verfahren.style.width = 140;
|
|
}
|
|
kanzeige();
|
|
}
|
|
function kanzeige() {
|
|
tagezahl[2] = schaltjahr(jjahr);
|
|
jetzt();
|
|
zeit_ermitteln();
|
|
kalender();
|
|
txt();
|
|
zeitakt = window.setTimeout("kanzeige()",zeitintervall);
|
|
}
|
|
function txt() {
|
|
if(ns4)
|
|
if(document.layers[idname]){
|
|
document.layers[idname].document.open('text/html');
|
|
document.layers[idname].document.write(inhalt);
|
|
document.layers[idname].document.close();
|
|
}
|
|
if(ie4)
|
|
if(document.all[idname])
|
|
document.all[idname].innerHTML = inhalt;
|
|
if(ns6)
|
|
if(document.getElementById(idname))
|
|
document.getElementById(idname).innerHTML = inhalt;
|
|
}
|
|
function zeit_ermitteln() {
|
|
aktuell = new Date();
|
|
sekunde = aktuell.getSeconds();
|
|
minute = aktuell.getMinutes();
|
|
stunde = aktuell.getHours();
|
|
jstunde = String(stunde);
|
|
jminute = String(minute);
|
|
jsekunde = String(sekunde);
|
|
if (minute < 10) jminute = "0" + String(minute);
|
|
if (sekunde < 10) jsekunde = "0" + String(sekunde);
|
|
}
|
|
function schaltjahr(j) {
|
|
t = 28;
|
|
if (j % 4 == 0) {
|
|
t = 29;
|
|
if (j % 100 == 0 && j % 400 != 0) t = 28;
|
|
}
|
|
return t;
|
|
}
|
|
function jetzt() {
|
|
jdat = new Date(jjahr,jmonat-1,1);
|
|
starttag = jdat.getDay();
|
|
if (starttag == 0) starttag = 7;
|
|
}
|
|
function monatzurueck() {
|
|
window.clearTimeout(zeitakt);
|
|
jmonat--;
|
|
if (jmonat<1) {
|
|
jmonat = 12;
|
|
jjahr--;
|
|
if (jjahr < 1970) {
|
|
jjahr = 1970;
|
|
jmonat = 1;
|
|
}
|
|
}
|
|
kanzeige();
|
|
}
|
|
function monatvor() {
|
|
window.clearTimeout(zeitakt);
|
|
jmonat++;
|
|
if (jmonat > 12) {
|
|
jmonat = 1;
|
|
jjahr++;
|
|
}
|
|
kanzeige();
|
|
}
|
|
function stellen() {
|
|
jtag = tag;
|
|
jmonat = monat;
|
|
jjahr = jahr;
|
|
kanzeige();
|
|
}
|
|
function kalender() {
|
|
trtag = "<tr align=\"center\" valign=\"middle\">";
|
|
style1 = "style=\"border:none; "+bordnav+" font-weight: "+monatform+"; background-color: "+titelhg+"; color: "+titelvg+";\"";
|
|
style2 = "style=\"border:none; "+borduhr+" font-weight: "+uhrform+"; background-color: "+titelhg+"; color: "+titelvg+";\"";
|
|
tdtag = "</td><td bgcolor=\""+werk+"\" width=\"20\" style=\"color: "+tagfarbe+"; font-weight: normal; font-size: 100%;\">";
|
|
inhalt = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"140\" style=\"font-size: 9.0pt;font-style: normal;\">";
|
|
inhalt = inhalt + trtag;
|
|
// Uhrzeit im Tabellenkopf anzeigen
|
|
//inhalt = inhalt + "<td height=\"18\" colspan=\"7\" " + style2 + ">"+jstunde+":"+jminute+":"+jsekunde+" Uhr</td>";
|
|
//inhalt = inhalt + "</tr>" + trtag;
|
|
inhalt = inhalt + "<td height=\"18\" " + style1 + "><img src=\""+zurueck+"\" alt=\"<\" onclick=\"monatzurueck();\" title=\"Einen Monat zurück\" style=\"cursor: hand;\"></td>";
|
|
inhalt = inhalt + "<td colspan=\"5\" " + style1 + ">"+monate[jmonat]+" "+jjahr+"</td>";
|
|
inhalt = inhalt + "<td " + style1 + "><img src=\""+vor+"\" alt=\">\" onclick=\"monatvor();\" title=\"Einen Monat vor\" style=\"cursor: hand;\"></td></tr>";
|
|
inhalt = inhalt + trtag + "<td height=\"18\" bgcolor=\""+werk+"\" width=\"20\" style=\"font-style: normal; color: "+tagfarbe+"; font-weight: normal; font-size: 100%;\">Mo" + tdtag + "Di" + tdtag + "Mi" + tdtag + "Do" + tdtag + "Fr</td><td style=\"font-style: normal; color: "+tagfarbe+"; font-weight: normal; font-size: 100%;\" bgcolor=\""+sams+"\" width=\"20\">Sa</td><td style=\"font-style: normal; color: "+tagfarbe+"; font-weight: normal; font-size: 100%;\" bgcolor=\""+sonn+"\" width=\"20\">So</td></tr>";
|
|
zahl = 0;
|
|
for(asl=1; asl<7; asl++) {
|
|
inhalt = inhalt + trtag;
|
|
for(bsl=1; bsl<8; bsl++) {
|
|
zahl++;
|
|
if (bsl < 6) farbe = werk;
|
|
if (bsl == 6) farbe = sams;
|
|
if (bsl > 6) farbe = sonn;
|
|
akt = zahl + 1 - starttag;
|
|
if (jmonat == 1 && akt == 1 || jmonat == 5 && akt == 1 || jmonat == 6 && akt == 17 && jjahr < 1992 || jmonat == 10 && akt == 3 && jjahr > 1990 || jmonat == 12 && (akt == 25 || akt == 26)) farbe = sonn;
|
|
if (zahl < starttag || akt > tagezahl[jmonat]) inhalt = inhalt + "<td height=\"18\" style=\"font-style: normal; font-weight: normal; font-size: 100%;background-color: "+farbe+";\"> </td>";
|
|
if (zahl >= starttag && akt <= tagezahl[jmonat]) {
|
|
if (akt == tag && jmonat == monat && jjahr == jahr)
|
|
{
|
|
if (bsl < 6) {inhalt = inhalt + "<td height=\"18\" background=\""+now+"\" style=\"font-style: normal; color: "+datumfarbe+"; font-weight: normal; font-size: 100%;background-color: "+atag+";\">"+String(akt)+"</td>";}
|
|
if (bsl == 6) {inhalt = inhalt + "<td height=\"18\" background=\""+w_now+"\" style=\"font-style: normal; color: "+datumfarbe+"; font-weight: normal; font-size: 100%;background-color: "+atag_sa+";\">"+String(akt)+"</td>";}
|
|
if (bsl > 6) {inhalt = inhalt + "<td height=\"18\" background=\""+w_now+"\" style=\"font-style: normal; color: "+datumfarbe+"; font-weight: normal; font-size: 100%;background-color: "+atag_so+";\">"+String(akt)+"</td>";}
|
|
|
|
}
|
|
else
|
|
inhalt = inhalt + "<td height=\"18\" style=\"font-style: normal; color: "+datumfarbe+"; font-weight: normal; font-size: 100%;background-color: "+farbe+";\">"+String(akt)+"</td>";
|
|
}
|
|
}
|
|
inhalt = inhalt + "</tr>";
|
|
}
|
|
inhalt = inhalt + trtag + "<td height=\"18\" colspan=\"7\" style=\"border:none; "+borddatum+" font-weight: "+datform+"; "+bordmon+" background-color: "+titelhg+"; color: "+titelvg+"; cursor: hand;\" onclick=\"stellen();\" title=\"klicken = Kalender auf den heutigen Tag zurückstellen\">"+wochentag[tage]+", "+ganztag+"."+monatx+"."+jahr+"</td></tr>";
|
|
// anstatt Wochentag den Monat ausschreiben
|
|
//inhalt = inhalt + trtag + "<td height=\"18\" colspan=\"7\" style=\"border:none; font-weight: "+uhrform+"; "+bordmon+" background-color: "+titelhg+"; color: "+titelvg+"; cursor: hand;\" onclick=\"stellen();\" title=\"klicken = Kalender auf den heutigen Tag zurückstellen\">""+ganztag+". "+monate[monat]+" "+jahr+"</td></tr>";
|
|
|
|
inhalt = inhalt + trtag + "<td height=\"18\" colspan=\"7\" " + style2 + ">"+jstunde+":"+jminute+" Uhr</td></tr>";
|
|
// wenn bei der Uhrzeit Sekunden angezeigt werden sollen (zeitintervall auf 1000 setzen):
|
|
//inhalt = inhalt + trtag + "<td height=\"18\" colspan=\"7\" " + style2 + ">"+jstunde+":"+jminute+":"+jsekunde+" Uhr</td></tr>";
|
|
|
|
inhalt = inhalt + "</table>";
|
|
}
|
|
function startbewegen(e){
|
|
if (ns4) {
|
|
posx = e.pageX;
|
|
posy = e.pageY;
|
|
aktuellx = window.document[idname].pageX;
|
|
aktuelly = window.document[idname].pageY;
|
|
kleben = true;
|
|
window.captureEvents(Event.MOUSEMOVE);
|
|
window.onmousemove = bewegen;
|
|
}
|
|
if (ie4 && event.srcElement.id == idname || ns6 && e.target.id == idname) {
|
|
posx = ie4? event.clientX : e.clientX;
|
|
posy = ie4? event.clientY : e.clientY;
|
|
aktuellx = parseInt(verfahren.style.left);
|
|
aktuelly = parseInt(verfahren.style.top);
|
|
kleben = true;
|
|
document.onmousemove = bewegen;
|
|
}
|
|
}
|
|
function bewegen(e){
|
|
if (kleben) {
|
|
if (ie4){
|
|
verfahren.style.left = aktuellx + event.clientX - posx;
|
|
verfahren.style.top = aktuelly + event.clientY - posy;
|
|
}
|
|
if (ns6){
|
|
verfahren.style.left = Number(aktuellx + e.clientX - posx);
|
|
verfahren.style.top = Number(aktuelly + e.clientY - posy);
|
|
}
|
|
if (ns4)
|
|
window.document[idname].moveTo (aktuellx + e.pageX - posx,aktuelly + e.pageY - posy);
|
|
}
|
|
return true;
|
|
}
|
|
if(ns4) {
|
|
window.captureEvents(Event.MOUSEDOWN);
|
|
window.captureEvents(Event.MOUSEUP);
|
|
window.onmousedown = startbewegen;
|
|
window.onmouseup = new Function("kleben=false");
|
|
}
|
|
else {
|
|
document.onmousedown = startbewegen;
|
|
document.onmouseup = new Function("kleben=false");
|
|
}
|