/** pics.kalender.js Desc: Framework für DHTML-Kalender basiert auf pics.base Author: Christian Grösswang 20061227,gc - v0.01 Prototype + Test 20070516,gc - v1.00 Erweiterung um Zeitauswahl **/ /* Funktionsübersicht Window-Klasse + -Framework: pics.Kalender Das Kalender-Objekt pics.TimeSelect Das TimeSelect-Objekt */ // Constructor, falls das PICS-Framework nicht geladen ist if (typeof pics == 'undefined') pics = {}; /* * ==================================================================================== * ===== FRAMEWORK: pics.Kalender ==== * ==================================================================================== */ var oPICSKalender; // Standard-Kalenderobjekt var oPICSTimeSelect; // Standard-TimeSelectobjekt var kalender_setDest=''; // Ziel für das setzen des Datums /* ========================= Constructor ========================= */ /** * pics.Kalender * Neuen Kalender erstellen */ pics.Kalender = function(pObjectName, pDate, pCallBack) { this.Name=pObjectName; // Datum speichern if (!pDate) { // kein Datum angegeben -> heute tmp=new Date(); this.Jahr=tmp.getFullYear(); this.Monat=1+tmp.getMonth(); this.Tag=tmp.getDate(); } else { // vorhandenens Datum übernehmen tmp=pDate.split('.'); this.Jahr=tmp[2]*1; this.Monat=tmp[1]*1; this.Tag=tmp[0]*1; if (this.Jahr<100) this.Jahr=this.Jahr+2000; } // WochenTage this.dayNames=new Array('So','Mo','Di','Mi','Do','Fr','Sa','So'); this.monthNames=new Array('','Jänner','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'); // aktuell angezeigtes Monat this.calJahr=this.Jahr; this.calMonat=this.Monat; this.calTag=this.Tag; // CallBack if (!pCallBack) pCallBack = null; this.callbackHandler=pCallBack; // Optionen this.titleBar=true; // Neues Objekt erstellen var oDiv = document.createElement("div"); // Attribute setzen oDiv.setAttribute("id","pics_Kalender"); // für Firefox müssen wir das style-Attribute setzen, der IE versteht das nicht var lStyle="position: absolute; left: 0px; top: 0px; width: 200px; z-index:9999;"; oDiv.setAttribute("style",lStyle); // für den IE müssen wir das über das DOM machen if (pics.isIE) { oDiv.style.position="absolute"; oDiv.style.left=0; oDiv.style.top=0; oDiv.style.width=200; oDiv.style.zIndex=9999; } document.body.appendChild(oDiv); this.div=oDiv; } /* ========================= Basis-Funktionen ========================= */ /** * pics.Kalender.showKalender * Kalender beim angegebenen Element anzeigen */ pics.Kalender.showKalender = function(pDate,pCallback,pElement) { oPICSKalender=new pics.Kalender('oPICSKalender',pDate,pCallback); // Wenn element angegeben, dann Position ermitteln if (pElement) { lX=pics.getElementX(pElement); lY=pics.getElementY(pElement); oPICSKalender.setPosition(lX,lY); } oPICSKalender.show(); } // pics.Kalender.showKalender /** * pics.Kalender.editField * Kalender für das gewählte Feld anzeigen und Datum dort zurückschreiben */ pics.Kalender.editField = function(pField,pElement) { // Datum aus dem Feld holen oField=document.getElementById(pField); lDate=oField.value; if (oPICSKalender) oPICSKalender.hide(); oPICSKalender=new pics.Kalender('oPICSKalender',lDate,'*VALUE:'+pField); // Wenn element angegeben, dann Position ermitteln if (pElement) { lX=pics.getElementX(pElement); lY=pics.getElementY(pElement); oPICSKalender.setPosition(lX,lY); } else { // Positionierung unterhalb des Feldes lX=pics.getElementX(oField); lY=pics.getElementY(oField); oPICSKalender.setPosition(lX,lY+25); } oPICSKalender.show(); } // pics.Kalender.editField /** * pics.Kalender.editRowField * Kalender für das gewählte Feld in einer Zeile anzeigen und Datum dort zurückschreiben */ pics.Kalender.editRowField = function(pField,pElement) { // Datum aus dem Feld holen oRow=pics.findParentID(pElement, "TR"); oField=pics.findElementsByName(oRow,pField); kalender_setDest=oField; lDate=oField.value; if (oPICSKalender) oPICSKalender.hide(); oPICSKalender=new pics.Kalender('oPICSKalender',lDate,'*FIELD'); // Wenn element angegeben, dann Position ermitteln if (pElement) { lX=pics.getElementX(pElement); lY=pics.getElementY(pElement); oPICSKalender.setPosition(lX,lY); } else { // Positionierung unterhalb des Feldes lX=pics.getElementX(oField); lY=pics.getElementY(oField); oPICSKalender.setPosition(lX,lY+25); } oPICSKalender.show(); } // pics.Kalender.editField /** * pics.Kalender.create * Kalender für das gewählte Feld anzeigen und Datum dort zurückschreiben */ pics.Kalender.create = function(pField) { // Datum aus dem Feld holen lDate=pField.value; if (lDate.indexOf(".")==-1 && lDate!="") { alert("Bitte geben Sie ein gültiges Datum ein."); pField.value=""; return; } oPICSKalender=new pics.Kalender('oPICSKalender',lDate,'*VALUE:'+pField.id); // Positionierung unterhalb des Feldes lX=pics.getElementX(pField); lY=pics.getElementY(pField); oPICSKalender.setPosition(lX,lY+25); oPICSKalender.show(); } // pics.Kalender.create // ========================= DATUMS-FUNKTIONEN ========================= /** * pics.Kalender.prototype.getDate * Datum zurückgeben */ pics.Kalender.prototype.getDate = function() { tmp=new Date(this.Jahr,this.Monat-1,this.Tag); return tmp; } // pics.Kalender.prototype.getDate /** * pics.Kalender.prototype.getDay * Tag zurückgeben */ pics.Kalender.prototype.getDay = function() { return this.Tag; } // pics.Kalender.prototype.getDay /** * pics.Kalender.prototype.getMonth * Monat zurückgeben */ pics.Kalender.prototype.getMonth = function() { return this.Monat; } // pics.Kalender.prototype.getMonth /** * pics.Kalender.prototype.getYear * Jahr zurückgeben */ pics.Kalender.prototype.getYear = function() { return this.Jahr; } // pics.Kalender.prototype.getYear /** * pics.Kalender.prototype.getSelectedDate * gewähltes Datum zurückgeben */ pics.Kalender.prototype.getSelectedDate = function() { tmp=new Date(this.calJahr,this.calMonat-1,this.calTag); return tmp; } // pics.Kalender.prototype.getSelectedDate /** * pics.Kalender.prototype.getSelectedDay * gewählten Tag zurückgeben */ pics.Kalender.prototype.getSelectedDay = function() { return this.calTag; } // pics.Kalender.prototype.getSelectedDay /** * pics.Kalender.prototype.getSelectedMonth * gewählten Monat zurückgeben */ pics.Kalender.prototype.getSelectedMonth = function() { return this.calMonat; } // pics.Kalender.prototype.getSelectedMonth /** * pics.Kalender.prototype.getSelectedYear * gewähltes Jahr zurückgeben */ pics.Kalender.prototype.getSelectedYear = function() { return this.calJahr; } // pics.Kalender.prototype.getSelectedYear /** * pics.Kalender.prototype.getWeekDay * Wochentag zurückgeben */ pics.Kalender.prototype.getWeekDay = function() { tmp=new Date(this.Jahr,this.Monat-1,this.Tag); return this.dayNames[tmp.getDay()]; } // pics.Kalender.prototype.getWeekDay /** * pics.Kalender.prototype.getMonthName * Monatsnamen zurückgeben */ pics.Kalender.prototype.getMonthName = function() { return this.monthNames[this.Monat]; } // pics.Kalender.prototype.getMonthName /** * pics.Kalender.prototype.getLastDayOfMonth * letzten Tag des Monats zurückgeben */ pics.Kalender.prototype.getLastDayOfMonth = function(pMonth, pYear) { var lastDay=0; if (!pMonth) { pMonth=this.Monat } if (!pYear) { pYear=this.Jahr } // letzten Tag des Monats ermitteln switch(pMonth) { case 4: case 6: case 9: case 11: lastDay=30; break; case 2: // Februar, eventuell Schaltjahr? lDate=new Date(pYear,2,1); lDate=new Date(lDate.valueOf()-1000); // Vortag lastDay=lDate.getDate(); break; default: lastDay=31; } return lastDay; } // pics.Kalender.prototype.getLastDayOfMonth /** * pics.Kalender.prototype.formatDate(pDate) * formatiertes Datum zurückgeben */ pics.Kalender.prototype.formatDate = function(pDate) { if (!pDate) pDate=new Date(this.Jahr,this.Monat-1,this.Tag); return pDate.getDate()+'.'+(pDate.getMonth()+1)+'.'+pDate.getFullYear(); } // pics.Kalender.prototype.formatDate /** * pics.Kalender.prototype.setFormatedDate * formatiertes Datum setzen */ pics.Kalender.prototype.setFormatedDate = function() { // nur wenn das Datum passt if (this.checkFormatedDate(pDate)) { tmp=pDate.split('.'); this.Jahr=1*tmp[2]; this.Monat=1*tmp[1]; this.Tag=1*tmp[0]; this.calJahr=1*tmp[2]; this.calMonat=1*tmp[1]; this.calTag=1*tmp[0]; } } // pics.Kalender.prototype.setFormatedDate /** * pics.Kalender.prototype.checkFormatedDate(pDate) * formatiertes Datum prüfen */ pics.Kalender.prototype.checkFormatedDate = function(pDate) { // eingegebenes Datum pruefen var isDate=true; tmp=pDate.split('.'); if ((tmp[2]>=1 && tmp[2]<2050)== false) isDate=false; if ((tmp[1]>=1 && tmp[1]<=12)== false) isDate=false; if ((tmp[0]>=1 && tmp[0]<32)== false) isDate=false; return isDate; } // pics.Kalender.prototype.checkFormatedDate /** * pics.Kalender.prototype.setDate(pDate) * Datum setzen */ pics.Kalender.prototype.setDate = function(pDate) { this.Jahr=pDate.getFullYear(); this.Monat=pDate.getMonth(); this.Tag=pDate.getDate(); this.calJahr=pDate.getFullYear(); this.calMonat=pDate.getMonth(); this.calTag=pDate.getDate(); } // pics.Kalender.prototype.setDate // ===== Funktionen zum Anzeigen/Ausblenden/Clicken ===== /** * pics.Kalender.prototype.click(pDate) * Click-Handler */ pics.Kalender.prototype.click = function(pDay) { // Es wurde auf den Tag geklickt this.calTag=pDay; // ausblenden this.hide(); // callBack-Handler aufrufen this.callBack(); } // pics.Kalender.prototype.click /** * pics.Kalender.prototype.show() * Kalender anzeigen */ pics.Kalender.prototype.show = function() { // Layer einblenden this.redrawCalendar(); this.div.style.visibility='visible'; // Comboboxen im IE ausblenden if (pics.isIE) pics.disableElements('select'); } // pics.Kalender.prototype.show /** * pics.Kalender.prototype.hide() * Kalender ausblenden */ pics.Kalender.prototype.hide = function() { // Layer einblenden this.div.style.visibility='hidden'; // eventuell ausgeblendete Comboboxen im IE wieder einblenden if (pics.isIE) pics.enableElements('select'); } // pics.Kalender.prototype.hide /** * pics.Kalender.prototype.gotoMonth(pDist) * Kalender um pDist Monate verschieben */ pics.Kalender.prototype.gotoMonth = function(pDist) { this.calMonat+=pDist; if (this.calMonat>12) { this.calMonat=1; this.calJahr++; } else if (this.calMonat<1) { this.calMonat=12; this.calJahr--; } this.redrawCalendar(); } // pics.Kalender.prototype.gotoMonth /** * pics.Kalender.prototype.redrawCalendar() * Kalender neu zeichnen */ pics.Kalender.prototype.redrawCalendar = function() { this.div.innerHTML=this.html(); } // pics.Kalender.prototype.redrawCalendar /** * pics.Kalender.prototype.setPosition(pX, pY) * Kalender Positionieren */ pics.Kalender.prototype.setPosition = function(pX, pY) { this.div.style.left=pX+'px'; this.div.style.top=pY+'px'; } // pics.Kalender.prototype.setPosition // ===== HTML-Ausgabefunktion ===== /** * pics.Kalender.prototype.html * liefert den HTML-Code für den Kalender */ pics.Kalender.prototype.html = function() { lHtml=''; var lWeekDay=0; // mal den Wochentag des 1. ermitteln tmp=new Date(this.calJahr, this.calMonat-1,1); lStartDay=tmp.getDay(); if (lStartDay==0) { lStartDay=7; } lLastDay=this.getLastDayOfMonth(this.calMonat, this.calJahr); lHtml+=''; // muss ein Titlebar erzeugt werden? if (this.titleBar) { lHtml+=''; lHtml+=''; lHtml+=''; } // Headline lHtml+=''; lHtml+=''; lHtml+=''; lHtml+=''; lHtml+=''; // Wochentage lHtml+=''; for(i=1;i<=7;i++) { lHtml+=''; } lHtml+=''; // Leerraum bis zum Tag for(i=1;i'+i+''; } else { lHtml+=''; } lWeekDay++; if (lWeekDay==8) { lHtml+=''; lWeekDay=1; } } // Jetzt noch den Rest auffuellen if (lWeekDay>1) { for(i=lWeekDay;i<=7;i++) { if (i==1) { lHtml+=''; } lHtml+=''; if (i==7) { lHtml+=''; } } } lHtml+='
x
«'+this.monthNames[this.calMonat]+' '+this.calJahr+'»
'+this.dayNames[i]+'
'+i+'
 
'; return lHtml; } /* ========================= Callback-Handler ========================= */ /** * pics.Kalender.prototype.callBack() * CallBack-Handler für Kalender-Click * @return boolean true */ pics.Kalender.prototype.callBack = function() { // wenn es keinen gibt, dann raus hier if (this.callbackHandler==null) return false; lDate=this.formatDate(this.getSelectedDate()); switch(this.callbackHandler.substr(0,5)) { case "*HTML": // Interner HTML-Callback-Handler setHTML lElement=this.callbackHandler.substr(6); oElement=document.getElementById(lElement); oElement.innerHTML=lDate; break; case "*VALU": // Interner Callback-Handler für Felder lElement=this.callbackHandler.substr(7); oElement=document.getElementById(lElement); oElement.value=lDate; break; case "*FIEL": // Interner Callback-Handler für auf kalender_setDest kalender_setDest.value=lDate; kalender_setDest=''; break; case "*ALER": // Interner Callback-Handler alert alert(lDate); break; default: // individuelle Funktion // eval(pics.Ajax.Requests[pID]["callback"]+"('"+encodeURI(pics.Ajax.Requests[pID]["result"])+"')"); eval(this.callbackHandler+'("'+lDate+'")'); break; } // switch } // pics.Kalender.callBack() /* * ==================================================================================== * ===== OBJEKT: pics.TimeSelect ==== * ==================================================================================== */ /* ========================= Constructor ========================= */ /** * pics.TimeSelect * Neuen TimeSelect erstellen */ pics.TimeSelect = function(pObjectName, pTime, pCallBack,pWidth) { this.Name=pObjectName; if (typeof pWidth == 'undefined') pWidth=70; // Datum speichern this.setTime(pTime); // CallBack if (!pCallBack) pCallBack = null; this.callbackHandler=pCallBack; // Neues Objekt erstellen var oDiv = document.createElement("div"); // Attribute setzen oDiv.setAttribute("id","pics_TimeSelect"); // für Firefox müssen wir das style-Attribute setzen, der IE versteht das nicht var lStyle="position: absolute; left: 0px; top: 0px; width: "+pWidth+"px; height: 100px; z-index:9999; overflow:auto;"; oDiv.setAttribute("style",lStyle); // für den IE müssen wir das über das DOM machen if (pics.isIE) { oDiv.style.position="absolute"; oDiv.style.left=0; oDiv.style.top=0; oDiv.style.width=100; oDiv.style.height=100; oDiv.style.overflow='auto'; oDiv.style.zIndex=9999; } document.body.appendChild(oDiv); this.div=oDiv; } /* ========================= Basis-Funktionen ========================= */ /** * pics.TimeSelect.editField * TimeSelect für das gewählte Feld anzeigen und Zeit dort zurückschreiben */ pics.TimeSelect.editField = function(pField,pElement) { // Datum aus dem Feld holen oField=document.getElementById(pField); lTime=oField.value; if (!oPICSTimeSelect) oPICSTimeSelect=new pics.TimeSelect('oPICSTimeSelect',lTime,'*VALUE:'+pField); oPICSTimeSelect.callbackHandler='*VALUE:'+pField; oPICSTimeSelect.setTime(lTime); // Wenn element angegeben, dann Position ermitteln if (pElement) { lX=pics.getElementX(pElement); lY=pics.getElementY(pElement); oPICSTimeSelect.setPosition(lX,lY); } else { // Positionierung unterhalb des Feldes lX=pics.getElementX(oField); lY=pics.getElementY(oField); oPICSTimeSelect.setPosition(lX,lY+20); } oPICSTimeSelect.show(); } // pics.TimeSelect.editField // ========================= DATUMS-FUNKTIONEN ========================= /** * pics.TimeSelect.prototype.setTime(pTime) * Zeit setzen */ pics.TimeSelect.prototype.setTime = function(pTime) { if (!pTime) { // kein Datum angegeben -> heute tmp=new Date(); this.Stunde=tmp.getHours(); this.Minute=tmp.getMinutes(); } else { // vorhandenens Datum übernehmen tmp=pTime.split(':'); this.Stunde=tmp[0]*1; this.Minute=tmp[1]*1; } // Umrechnen auf die nächste halbe Stunde if (this.Minute<15) this.Minute=0; if (this.Minute>=55) { this.Minute=0; this.Stunde++; } if (this.Minute!=0) this.Minute=30; // max=23:59! if (this.Stunde>23) this.Stunde==0; } // pics.TimeSelect.prototype.setTime /** * pics.TimeSelect.prototype.formatTime * Zeit zurückgeben */ pics.TimeSelect.prototype.formatTime = function(pHour,pMinute) { if (typeof pHour == 'undefined') pHour=this.Stunde; if (typeof pMinute == 'undefined') pMinute=this.Minute; // Umrechnen auf 2 Stellen if (pHour<10) pHour='0'+pHour; if (pMinute<10) pMinute='0'+pMinute; return pHour+':'+pMinute; } // pics.TimeSelect.prototype.getTime // ===== Funktionen zum Anzeigen/Ausblenden/Clicken ===== /** * pics.Kalender.prototype.click(pDate) * Click-Handler */ pics.TimeSelect.prototype.click = function(pHour, pMinute) { this.Stunde=pHour; this.Minute=pMinute; // ausblenden this.hide(); // callBack-Handler aufrufen this.callBack(); } // pics.TimeSelect.prototype.click /** * pics.TimeSelect.prototype.show() * TimeSelect anzeigen */ pics.TimeSelect.prototype.show = function() { // Layer einblenden this.redraw(); // Positionieren this.div.scrollTop=this.Stunde*30; // anzeigen this.div.style.visibility='visible'; // Comboboxen im IE ausblenden if (pics.isIE) pics.disableElements('select'); } // pics.TimeSelect.prototype.show /** * pics.TimeSelect.prototype.hide() * TimeSelect ausblenden */ pics.TimeSelect.prototype.hide = function() { // Layer einblenden this.div.style.visibility='hidden'; // eventuell ausgeblendete Comboboxen im IE wieder einblenden if (pics.isIE) pics.enableElements('select'); } // pics.TimeSelect.prototype.hide /** * pics.TimeSelect.prototype.redrawCalendar() * TimeSelect neu zeichnen */ pics.TimeSelect.prototype.redraw = function() { this.div.innerHTML=this.html(); } // pics.TimeSelect.prototype.redrawCalendar /** * pics.TimeSelect.prototype.setPosition(pX, pY) * TimeSelect Positionieren */ pics.TimeSelect.prototype.setPosition = function(pX, pY) { this.div.style.left=pX+'px'; this.div.style.top=pY+'px'; } // pics.TimeSelect.prototype.setPosition // ===== HTML-Ausgabefunktion ===== /** * pics.TimeSelect.prototype.html * liefert den HTML-Code für den TimeSelect */ pics.TimeSelect.prototype.html = function() { lHtml=''; var lWeekDay=0; lHtml+=''; // jetzt das ganze Monat for(h=0;h<=23;h++) { for (m=0;m<=1;m++) { lHtml+=''; if (h==this.Stunde && this.Minute==m*30) { lHtml+=''; } else { lHtml+=''; } } } lHtml+='
'+this.formatTime(h,(m*30))+''+this.formatTime(h,(m*30))+'
'; return lHtml; } // pics.TimeSelect.prototype.html /* ========================= Callback-Handler ========================= */ /** * pics.TimeSelect.prototype.callBack() * CallBack-Handler für TimeSelect-Click * @return boolean true */ pics.TimeSelect.prototype.callBack = function() { // wenn es keinen gibt, dann raus hier if (this.callbackHandler==null) return false; lTime=this.formatTime(); switch(this.callbackHandler.substr(0,5)) { case "*HTML": // Interner HTML-Callback-Handler setHTML lElement=this.callbackHandler.substr(6); oElement=document.getElementById(lElement); oElement.innerHTML=lTime; break; case "*VALU": // Interner Callback-Handler für Felder lElement=this.callbackHandler.substr(7); oElement=document.getElementById(lElement); oElement.value=lTime; break; case "*ALER": // Interner Callback-Handler alert alert(lTime); break; default: // individuelle Funktion // eval(pics.Ajax.Requests[pID]["callback"]+"('"+encodeURI(pics.Ajax.Requests[pID]["result"])+"')"); eval(this.callbackHandler+'("'+lTime+'")'); break; } // switch } // pics.Kalender.callBack() // === ALTER KALENDER === /* JavaScript-Kalender (c) 2002 Ing. Christian Grösswang Hier gibt es einen Kalender im Look des Outlook-Kalenders inkl. Formatierung für europaeisches Datum und CallBack Basierend auf DHTML vom IE 5.x oder höher Version 13-08-2002,gc Notwendige Styles */