/** * Datei mit der Kalender-Klasse hueCalendar * * Diese Klasse erzeugt beim Aufruf eine Kalenderauswahl. Durch Klick auf ein Datum * wird ein datum in die value-Eigenschaft eines frei zu bestimmenden Elementes * eingetragen. Es können Min- und Max-Datum für eine zeitliche Begrenzung * der Auswahlmöglichkeiten eingegeben werden. * * Hinweis: Beim Instanzieren des Objektes MUSS der Name der Instanzenvariable * mit übergeben werden! Z.B.: meinDatum = new hueCalendar('meinDatum'); * * Der Grund dafür: Mir ist es nicht gelungen, dem Objekt zu entnehmen, welcher * konkreten Instanz das this.objekt zugeordnet ist. * * Nützliche Funktionen sind: * * - hueCalendar.setze_heute([datum_als_string]): ein anderes als das aktuelle Datum wird zum 'heutigen' Tag * * - hueCalendar.setze_datum_min(min_datum_als_string, [element_id_als_string]); Kleinstes zulässiges Datum wird (temporär) gesetzt; * optional kann die ID des Elementes (HTML-Input_Feldes) angegeben werden, welches das Datum, das den unteren Wert einer Bereichsgrenze bildet, aufnimmt; * Wird in diesem Feld später das Datum wieder gelöscht, wird der minimale Wert wieder auf das kleinste Datum zurück gesetzt. s.a.: setze_datum_min_abs * * - hueCalendar.setze_datum_min_abs(min_datum_als_string); Absolut kleinstes zulässiges Datum wird gesetzt; * Dieses Datum kann nie unterschritten werden. * * - hueCalendar.setze_datum_max(min_datum_als_string, [element_id_als_string]); wie setze_datum_min * * - hueCalendar.setze_datum_max(min_datum_als_string, [element_id_als_string]); wie setze_datum_min_abs * * - hueCalendar.setze_titel(string); Setzen eines Titels für die Kalenderauswahl; sollte immer kurz sein, weil sonst * die Kalenderdarstellung leidet. * * - hueCalendar.hole_datum(event, element_id_als_string, [name_ausgabeformat_als_string]); Hiermit * wird die Kalenderauswahl aktiviert. Das event muss so, wie es hier angegebn ist, hingeschrieben werden. * Es folgt der Name der ID desjenigen Feldes, dessen value-Eigenschaft das ausgewählte Datum aufnehmen * soll. Optionall kann noch ein Name für ein Ausgabeformat angegeben werden. Zur Zeit wird das Datum * immer in der Form 'tag.monat.jahr' ausgegeben. * * * @author Thomas Hülsmann * @date 17.3.2004 * @copyright Thomas Hülsmann JS * @copyright Michael Holter Design */ /** * Konstruktor für die Klasse hueCalendar * * @package basic_javascripts * @version 1.1 */ function hueCalendar(instanz_name){ if(! instanz_name){ alert('Das Objekt hueCalendar kann nicht erzeugt werden'); return(false); } // ******************************************************************** // Klassen-Eigenschaften (Variablen) festlegen // ******************************************************************** /**#@+ * @var string verschiedene Style-Eigenschaften * @access private */ this.style_monat_jahr = 'style="font-family:verdana,arial,helvetica; font-size:1em; width:5em; color:#FFFFFF; font-weight:bold; background-color:#999999;"'; this.style_navigation = 'style="font-family:verdana,arial,helvetica; font-size:1em; font-weight:bold; font-style:normal; color:#000000; text-decoration:none; background-color:#c4c4c4;"'; this.style_tag_norm = 'style="font-family:verdana,arial,helvetica; font-size:1em; color:#FFFFFF; font-weight:bold; background-color:#888888;"'; this.style_tag_herv = 'style="font-family:verdana,arial,helvetica; font-size:1em; color:#FFFFFF; font-weight:bold; background-color:#c80000;"'; this.style_dat_norm = 'style="font-family:verdana,arial,helvetica; font-size:1em; color:#000000; font-weight:normal; background-color:#FFFFFF;"'; this.style_dat_herv = 'style="font-family:verdana,arial,helvetica; font-size:1em; color:#000000; font-weight:bold; background-color:#E0E0E0;"'; this.style_dat_heute = 'style="background-color:#ccccff;"'; this.style_dat_ungueltig= 'style="font-style:italic;color:gray;font-size:10px; "'; /**#@-*/ /** * @var array mit den Namen der Monate * @access private */ this.monats_namen = ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sept.', 'Okt.' , 'Nov.', 'Dez.']; // Namen der Monate /** * @var array mit den Namen der Wochentage * @access private */ this.wochentage = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; /** * @var array mit der Anzahl der Tage für jeden Monat * @access private */ this.tage_anzahl = [31,28,31,30,31,30,31,31,30,31,30,31]; /** * @var string Name der Instanzenvariablen, die dieses Object instanziert hat. * Zu dieser Vorgehensweise siehe auch oben die Hinweise zum Vorgehen beim * Instanzieren des Objektes. * @access private */ this.instanz_name = instanz_name; /** * @var pointer Zeiger auf das aufzubauende bzw. Aufgebaute Element mit der Auswahl * @access private */ this.element = null; /** * @var string möglicher Titel der Kalenderauswahl * @access private */ this.titel = ''; /** * @var string ID des erzeugten und in das Dokument eingefügten Dokuments; nach dem Erzeugen ist diese * ID z.Zt. immer 'hueCalender_001' * @access private */ this.id = ''; /** * @var integer X-Koordinate des Mauscklicks für das Öffnen der Kalenderauswahl; * das ist die x-Koordinate für die Position der Datumstabelle. * @access private */ this.x = 0; /** * @var integer Y-Koordinate des Mauscklicks für das Öffnen der Kalenderauswahl * das ist die y-Koordinate für die Position der Datumstabelle. * @access private */ this.y = 0; /** * @var string ID des Ziels für die Rückgabe des Datums; Das Datum wird in die * value-Eigenschaft des Feldes mit der angegeben ID geschrieben * @access private */ this.ziel = ''; /** * @var Name des Ausgabeformats; hiermit soll später das Ausgabeformat des * Datums beeinflußt werden. Wird z.Zt. noch nicht genutzt * @access private */ this.form = 'deutsch_standard'; //Form für die Datumsrückgabe /** * @vare date Das aktuelle Datum bzw. dasjenige Datum, das als das heutige angesehen werden soll! * @access private */ this.heute = new Date(); /** * var date Das aktuelle (anzuzeigende) Datum. Es interessiert immer nurder erste des Monats, * der Monat und das Jahr. * * Daher MUSS das ganze immer auf den 1. des jeweiligen Monats gesetzt werden und * ist damit wohl definiert! * * @access private */ this.aktuell = new Date(this.heute.getFullYear(), this.heute.getMonth(), 1); /** * @var date Untere Grenze eines Zeitraums; wenn nicht gesetzt, dann 0. * Es dient zur temporären Speicherung einer unteren Datumsgrenze. * @access private */ this.dat_min = 0; /** * @var date Obere Grenze eines Zeitraums; wenn nicht gesetzt, dann 0. * Es dient zur temporären Speicherung einer oberen Datumsgrenze. * @access private */ this.dat_max = 0; /** * @var date Absolute untere Grenze eines Zeitraums; wenn nicht gesetzt, dann 0. * Diese Grenze kann bei der Datumsauswahl auf keinen Fall unterschritten werden! * @access private */ this.dat_min_abs = 0; /** * @var date Absolute obere Grenze eines Zeitraums; wenn nicht gesetzt, dann 0. * Diese Grenze kann bei der Datumsauswahl auf keinen Fall überschritten werden! * @access private */ this.dat_max_abs = 0; // abolut größtes Datum /** * @var string ID für dasjenige Element, welches die untere Grenze eines * Zeitraums aufnimmt, wenn this.dat_min gesetzt wurde; wird in diesem * Feld das datum zurückgesetzt, wird die untere Grenze (wieder) auf * this.dat_min_abs gesetzt * @access private */ this.dat_min_abs_element_id = ''; /** * @var string Analog zu dat_min_abs_element_id * @access private */ this.dat_max_abs_elemnet_id = ''; // ******************************************************************** // Klassen-Methoden (Funktionen) festlegen // ******************************************************************** /** * Auf Schaltjahr testen * * @return boolean Wenn Datum ein Schaltjahr ist, true, sonst false */ this.istSchaltjahr = function(datum){ var antw = false; var j = datum.getFullYear(); if( (j % 4) == 0) antw = true; if( (j % 400) == 0) antw = false; return(antw); }; /** /** * Datum aus einem Datumsstring liefern * * @param string Ein Datum als String; z.B. '2.3.2004' * @return date Ein Wert vom Typ Datum oder 0 */ this.mache_zu_datum = function(d_als_string){ rueckgabe = 0; if(d_als_string){ teile = d_als_string.split('.'); if(teile.length == 3){ rueckgabe = new Date(teile[2],(teile[1]-1),teile[0]); } } return(rueckgabe) } /** * Das Datum, das als das heutige angesehen werden soll, setzen * * @param string Ein Datum als String; z.B. '2.3.2004' */ this.setze_heute = function(d_als_string){ this.heute = this.mache_zu_datum(d_als_string); if (this.heute == 0) this.heute = new Date(); this.aktuell = new Date(this.heute.getFullYear(), this.heute.getMonth(), 1); } /** * Untere Grenze für einen Datumsbereich setzen * * Unterhalb dieser Grenze kann kein Datum ausgewählt werden. Diese * Funktion dient zum temporären Speichern einer (neuen) unteren * Datumsgrenze. * * @param string Ein Datum als String; z.B. '2.3.2004' * @param string optional Eine ID für dasjenige Element, dessen * value-Eigenschaft die untere Datumsgrenze aufnehmen soll. */ this.setze_datum_min = function(d_als_string){ this.dat_min = this.mache_zu_datum(d_als_string); // ID von dem Element merken, das das kleinste Datum enthalten kann if(arguments[1]) this.dat_min_abs_element_id = arguments[1]; } /** * Obere Grenze für einen Datumsbereich setzen * * Oberhalb dieser Grenze kann kein Datum ausgewählt werden. Diese * Funktion dient zum temporären Speichern einer (neuen) oberen * Datumsgrenze. * * @param string Ein Datum als String; z.B. '2.3.2004' * @param string optional Eine ID für dasjenige Element, dessen * value-Eigenschaft die obere Datumsgrenze aufnehmen soll. */ this.setze_datum_max = function(d_als_string){ this.dat_max = this.mache_zu_datum(d_als_string); // ID von dem Element merken, das das größte Datum enthalten kann if(arguments[1]) this.dat_max_abs_element_id = arguments[1]; } /** * Absoute untere Grenze für einen Datumsbereich setzen * * Unterhalb dieser Grenze kann nie ein Datum ausgewählt werden. * * @param string Ein Datum als String; z.B. '2.3.2004' */ this.setze_datum_min_abs = function(d_als_string){ this.dat_min_abs = this.mache_zu_datum(d_als_string); } /** * Absolut obere Grenze für einen Datumsbereich setzen * * Oberhalb dieser Grenze kann nie ein Datum ausgewählt werden. * * @param string Ein Datum als String; z.B. '2.3.2004' */ this.setze_datum_max_abs = function(d_als_string){ this.dat_max_abs = this.mache_zu_datum(d_als_string); } /** * Einen Titel für den Kalender setzen * * @param string Ein Titel */ this.setze_titel = function(titel){ if(! titel) return; this.titel = titel; } /** * Einen Monat weiter * * Den Monat hochzählen. Beim Überschreiten der Jahresgrenze * das Jahr anpassen */ this.monat_plus = function(){ var monat = this.aktuell.getMonth(); var jahr = this.aktuell.getFullYear(); if(monat < 11) monat++; else{ monat = 0; jahr++; } this.aktuell.setFullYear(jahr,monat,1); this.build_calendar(); } /** * Einen Monat zurück * * Den Monat runterzählen. Beim Unterschreiten der Jahresgrenze * das Jahr anpassen */ this.monat_minus = function(){ var monat = this.aktuell.getMonth(); var jahr = this.aktuell.getFullYear(); if(monat > 0) monat--; else{ monat = 11; jahr--; } this.aktuell.setFullYear(jahr,monat,1); this.build_calendar(); } /** * Ein Jahr weiter * */ this.jahr_plus = function(){ var monat = this.aktuell.getMonth(); var jahr = this.aktuell.getFullYear(); jahr++; this.aktuell.setFullYear(jahr,monat,1); this.build_calendar(); } /** * Ein Jahr zurück * */ this.jahr_minus = function(){ var monat = this.aktuell.getMonth(); var jahr = this.aktuell.getFullYear(); jahr--; this.aktuell.setFullYear(jahr,monat,1); this.build_calendar(); } /** * Den aktuellen Monat auf das heutige Datum setzen * */ this.setze_auf_aktuellen_monat = function(){ this.aktuell = new Date(this.heute.getFullYear(), this.heute.getMonth(), 1); this.build_calendar(); } /** * Ein Datum in die value-Eigenschaft eines zuvor angegeben Feldes schreiben. */ this.get_it = function(t,m,j){ temp_datum_als_string = t + '.' + m + '.' + j; // Datum zusammen bauen var e = document.getElementById(this.ziel); // Ziel ermiteln if(e) e.value = temp_datum_als_string; // ins Ziel schreiben this.element.style.visibility = 'hidden'; // Kalenderelement verstecken } /** * Kalenderauswahl verstecken/ausblenden */ this.verstecken = function(){ this.element.style.visibility = 'hidden'; } /** * Einen leeren String in die value-Eigenschaft eines zuvor * angegeben Feldes schreiben. */ this.loeschen = function(){ var e = document.getElementById(this.ziel); if(e) e.value = ''; //evtl. temporäre untere Grenze löschen if(this.ziel == this.dat_min_abs_element_id) this.setze_datum_min(''); //evtl. temporäre obere Grenze löschen if(this.ziel == this.dat_max_abs_element_id) this.setze_datum_max(''); this.build_calendar(); } /** * Das Element mit dem Kalender aufbauen und in das Dokument einfügen * * Das ist die zentrale Funktion, die das Element zur Auswahl eines Datums * aufbaut. Das Umgebende Element ist ein DIV-Tag mit der ID hueCalender_001. * Darin sind verschachtelt Tabellen enthalten, die die Auswahlfunktionalitäten * enthalten. */ this.build_calendar = function(){ // Beim ersten Aufruf wird ein DIV-Tag aufgebaut und in das Dokument eingefügt. // Diese DIV-Tag nimmt dann den HTML-Text für die Datumsauswahl auf. if(this.id == ''){ this.element = document.createElement('DIV'); this.id = 'hueCalender_001'; this.element.setAttribute('id', this.id); this.element.setAttribute('style', 'border:0px solid red;'); document.body.appendChild(this.element); } // Das style-Attribute muss jedes mal neu aufgebaut werden, // da in ihm auch die Positionsangaben stehen! //Das folgende funktioniert leider im IE beim zweiten Aufruf nicht mehr. //Ausserdem findet der IE über getElementById('id') kein Element, //das dynamisch angelegt wurde! //this.element.setAttribute('style', 'background-color:lightblue;position:absolute;top:'+(this.y+5)+'px;left:'+(this.x+10)+'px;z-index:1000; visibility:visible'); // So geht's auch im IE this.element.style.position ='absolute'; this.element.style.top = (this.y+ -10)+'px'; this.element.style.left = (this.x+10)+'px'; this.element.style.visibility ='visible'; /*************************************************************** Ab hier wird der 'HTML-Text' für die Datumstabelle aufgebaut *****************************************************************/ // Zunächst noch in paar 'Vorarbeiten': var monat = this.aktuell.getMonth(); //Monat geht von 0-11! var jahr = this.aktuell.getFullYear(); var anzahl_tage = this.tage_anzahl[this.aktuell.getMonth()]; if( monat == 1 && this.istSchaltjahr(this.aktuell) ) anzahl_tage++; // Für Februar im Schaltjahr var tag_der_woche = this.aktuell.getDay(); // Voraussetzung: this.aktuell ist immer der 1. des Monats! if(tag_der_woche == 0) tag_der_woche = 7; // für Sonntag var t = ''; if(this.titel != ''){ t += '' + // 'nulte' Zeile der Haupttabelle für einen Titel '' + ''; } t += '' + // Erste Zeile der Haupttabelle mit einer Tabelle zur Aufnahme der Steuerelemente '' + '' + '' + // Zweite Zeile der Haupttabelle mit einer Tabelle zur Aufnahme des eigentl. Kalenders '' + '' + '' + // Dritte Zeile der Haupttabelle mit einer Tabelle zur Aufnahme der Steuerelemente für Löschen und Abbruch '' + '' + '
' + this.titel + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
<' + this.monats_namen[monat] + '> A <' + jahr + '>
' + '
' + '' + '' + // Jetzt werden die Wochentagsnamen in eine Zeile eingetragen '' + '' + '' + '' + '' + '' + '' + ''; // Ende der Zeile für die Wochentage // Ab jetzt folgten die Zeilen mit den eigentlichen Datumsangaben in Form der Tageszahlen if(tag_der_woche > 1) t += ''; // Zunächst die erste Zeile mit leeren Feldern auffüllen for(var i=1; i < tag_der_woche; i++){ t += ''; // Zwei wichtige Tests durchführen // 1. Testen, ob das 'heutige' Datum zur Anzeige gebracht werden soll var heute = false; if( i == this.heute.getDate() && monat == this.heute.getMonth() && jahr == this.heute.getFullYear()) heute = true;; // Liegt das Datum innerhalb der Grenzen (wenn diese gesetzt sind)? var gueltig = true; var temp_d = new Date(jahr, monat,i); // Monat hat die Werte 0 bis 11! if(temp_d < this.dat_min) gueltig = false; if(temp_d < this.dat_min_abs) gueltig = false; if(this.dat_max < temp_d && this.dat_max != 0) gueltig = false; if(this.dat_max_abs < temp_d && this.dat_max_abs != 0) gueltig = false; var angezeigtes_datum = i + '.' + (monat+1) + '.' + jahr; // Monat hat die Werte 0 bis 11! // **** Start Tabellenzelle zusammenbauen **** t += ''; // **** Ende Tabellenzelle zusammenbauen **** // Jetzt evtl. noch die Zeile Beenden, wenn gerade der Sonntag geschrieben wurde if(tag_der_woche == 7){ t += ''; tag_der_woche = 1; }else{ tag_der_woche++; } } // Ende: Jeden Tag des Monats eintragen // Evtl. den rest der Zeile mit lleren Zellen füllen if(tag_der_woche > 1){ for(i = tag_der_woche; i <= 7; i++){ t += ''; } } t += "
' + this.wochentage[0] + '' + this.wochentage[1] + '' + this.wochentage[2] + '' + this.wochentage[3] + '' + this.wochentage[4] + '' + this.wochentage[5] + '' + this.wochentage[6] + '
'; } // Start: Jeden Tag des Monats eintragen for(var i=1; i <= anzahl_tage; i++){ if(tag_der_woche == 1) t += '
zusammengebaut // Tabellenzelle mit Inhalt füllen if(! gueltig) t += ''; // Für Datum ausserhalb des gültigen Datumbereichs if(heute) t += ''; // Für das heutige Datum t += i; // Den Tag in die Tabellenzelle schreiben if(heute) t += ''; // heute-Ende if(! gueltig) t += ''; // ungültig-Ende t += '
'; if(i==7) t += '
" + '
' + '' + '' + '' + '' + '' + '' + '
löschen abbrechen
' + '
'; // Das war's /***************************************************************************** Zum Schluß wird der HTML-text für die Tabelle in das DIV-Tag eingebaut *****************************************************************************/ this.element.innerHTML = t ; $('#hueCalender_001').draggable(); } /** * Aufruf der Kalenderfunktion * * Dies ist die Funktion, die aufgerufen werden muss, um ein Datum abzurufen. * * @param event Ereignis, um festzstellen, wo die Maus gedrückt wurde * @param string ID desjenigen Elements, in dessen value-Eigenschaft das Datum gespeichert werden soll * @param string Name für eine Form, die festlegt, in welcher Form das Datum zurückgegeben werden soll. * voreingestellt ist 'deutsch_standard', das Standardformat z.B.: 1.3.2004. Weitere Rückgabeformate * müssen noch programmiert werden. * */ this.hole_datum = function(){ if(! arguments[0]){ alert('Kein Ereignis angegeben'); return false; } if(! arguments[1]){ alert('Kein Ziel angegeben' + arguments[1]); return false; } if(arguments[0]) var ereignis = arguments[0]; else return false; if(arguments[1]) var ziel = arguments[1]; else return false; if(arguments[2]) this.form = arguments[2]; if(ereignis.pageX){ this.x = ereignis.pageX; this.y = ereignis.pageY; }else{ this.x = ereignis.clientX; this.y = ereignis.clientY; } this.ziel = ziel; this.build_calendar(); } }