CalendarJS mit anderer HTML Struktur (Scriptsprachen)

Micha , Karlsruhe, Dienstag, 05. Januar 2010, 13:16 (vor 247 Tagen) @ Dodo
Hallo,
versuche mal folgenden Code und sag mir Bescheid, ob es das ist, was Du suchtest. Ich habe das leere SPAN nicht berücksichtigt, da ich keinen Sinn drin gesehen habe. Es ist eine Quick & Dirty Lösung aber ggf. reicht Dir das ja...
Gruß Micha
 
/**********************************************************************
*          Calendar JavaScript [DOM] v3.10 by Michael Loesler          *
************************************************************************
* Copyright (C) 2005-09 by Michael Loesler, http//derletztekick.com    *
*                                                                      *
*                                                                      *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 3 of the License, or    *
* (at your option) any later version.                                  *
*                                                                      *
* This program is distributed in the hope that it will be useful,      *
* but WITHOUT ANY WARRANTY; without even the implied warranty of       *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the        *
* GNU General Public License for more details.                         *
*                                                                      *
* You should have received a copy of the GNU General Public License    *
* along with this program; if not, see <http://www.gnu.org/licenses/>  *
* or write to the                                                      *
* Free Software Foundation, Inc.,                                      *
* 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.            *
*                                                                      *
 **********************************************************************/
 
	function CalendarJS() {
		this.now = new Date();
		this.dayname = ["Mo","Di","Mi","Do","Fr","Sa","So"];
		this.monthname = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];	
		this.tooltip = ["vorheriger Monat","nächster Monat","aktuelles Datum"];
		this.monthCell = document.createElement("th");
		this.tableNavi = null;
		this.tableHead = null;
		this.parEl = null;
 
		this.init = function( id, initDate ) {
			this.now = initDate?initDate:new Date();
			this.date = this.now.getDate();
			this.month = this.mm = this.now.getMonth();
			this.year = this.yy = this.now.getFullYear();
			this.monthCell.colSpan = 5;
			this.monthCell.appendChild(document.createTextNode( this.monthname[this.mm]+" "+this.yy ));
 
			this.tableNavi = this.createTableNavi();
 
			this.tableHead = this.createTableHead();
			this.parEl = document.getElementById( id );
			this.show();
			if (!initDate) this.checkDate();
		},
 
 
		this.checkDate = function() {
			var self = this;
			var today = new Date();
			if (this.date != today.getDate()) {
				this.date  = today.getDate();
				if (this.mm == this.month && this.yy == this.year)
					this.switchMonth("current");
				this.month = today.getMonth();
				if (this.mm == this.month && this.yy == this.year)
					this.switchMonth("current");
				this.year  = today.getFullYear();
				if (this.mm == this.month && this.yy == this.year)
					this.switchMonth("current");
 
			}
			window.setTimeout(function() { self.checkDate(); }, Math.abs(new Date(this.year, this.month, this.date, 24, 0, 0)-this.now));
		},
 
		this.removeElements = function( Obj ) {
			while( Obj.childNodes.length > 0)
				Obj.removeChild(Obj.childNodes[Obj.childNodes.length-1]);
			return Obj;
		},
 
		this.show = function() {
			this.parEl = this.removeElements( this.parEl );
			this.monthCell.firstChild.replaceData(0, this.monthCell.firstChild.nodeValue.length, this.monthname[this.mm]+" "+this.yy);
			this.tableNavi.childNodes[2].replaceData(0, this.tableNavi.childNodes[2].nodeValue.length, this.monthname[this.mm]+" "+this.yy);
			var table = document.createElement("table");
			table.appendChild( this.createTableBody() );
			table.appendChild( this.tableHead );
			this.parEl.appendChild( this.tableNavi );
			this.parEl.appendChild( document.createElement("hr") );
			this.parEl.appendChild( table );
		},
 
		this.createTableNavi = function() {
			var h3 = document.createElement("h3");
			h3.className = "catbg centertext";
 
			var span = document.createElement("span");
			span.className = "last_month";
			span.appendChild(document.createTextNode( "\u00AB" ));
			span.Instanz = this;
			span.onclick = function() { this.Instanz.switchMonth("prev"); };
			span.title = this.tooltip[0];
			try { span.style.cursor = "pointer"; } catch(e){ span.style.cursor = "hand"; }
			h3.appendChild( span );
 
			span = document.createElement("span");
			span.className = "next_month";
			span.appendChild(document.createTextNode( "\u00BB" ));
			span.Instanz = this;
			span.onclick = function() { this.Instanz.switchMonth("prev"); };
			span.title = this.tooltip[1];
			try { span.style.cursor = "pointer"; } catch(e){ span.style.cursor = "hand"; }
			h3.appendChild( span );
 
			h3.appendChild(document.createTextNode( this.monthname[this.mm]+" "+this.yy ));
			return h3;
		},
 
		this.createTableHead = function() {
			var thead = document.createElement("thead");
			/*
			var tr = document.createElement("tr");
			var th = this.getCell( "th", "\u00AB", "last_month" )
			th.Instanz = this;
			th.onclick = function() { this.Instanz.switchMonth("prev"); };
			th.title = this.tooltip[0];
			try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
			tr.appendChild( th );
			this.monthCell.Instanz = this;
			this.monthCell.onclick = function() { this.Instanz.switchMonth("current"); };
			this.monthCell.title = this.tooltip[2];
			try { this.monthCell.style.cursor = "pointer"; } catch(e){ this.monthCell.style.cursor = "hand"; }
			tr.appendChild( this.monthCell );			
			th = this.getCell( "th", "\u00BB", "next_month" )
			th.Instanz = this;
			th.onclick = function() { this.Instanz.switchMonth("next"); };
			th.title = this.tooltip[1];
			try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
			tr.appendChild( th );
			thead.appendChild( tr );
			*/
			var tr = document.createElement('tr');
			for (var i=0; i<this.dayname.length; i++)
				tr.appendChild( this.getCell("th", this.dayname[i], "weekday" ) );
			thead.appendChild( tr );
			return thead;
		},
 
		this.createTableBody = function() {
			var dayspermonth = [31,28,31,30,31,30,31,31,30,31,30,31];
			var sevendaysaweek = 0;
			var begin = new Date(this.yy, this.mm, 1);
			var firstday = begin.getDay()-1;
			if (firstday < 0)
				firstday = 6;
			if ((this.yy%4==0) && ((this.yy%100!=0) || (this.yy%400==0)))
				dayspermonth[1] = 29;
			var tbody = document.createElement("tbody");
			var tr = document.createElement('tr');
			if (firstday == 0) {
				for (var i=0; i<this.dayname.length; i++) {
					var prevMonth = (this.mm == 0)?11:this.mm-1;
					tr.appendChild( this.getCell( "td", dayspermonth[prevMonth]-6+i, "last_month" ) );
				}
				tbody.appendChild( tr );
				tr = document.createElement('tr');
			}
 
			for (var i=0; i<firstday; i++, sevendaysaweek++) {
				var prevMonth = (this.mm == 0)?11:this.mm-1;
				tr.appendChild( this.getCell( "td", dayspermonth[prevMonth]-firstday+i+1, "last_month" ) );
 
			}
 
			for (var i=1; i<=dayspermonth[this.mm]; i++, sevendaysaweek++){
				if (this.dayname.length == sevendaysaweek){
					tbody.appendChild( tr );
					tr = document.createElement('tr');
					sevendaysaweek = 0;
				}
 
				var td = null;
				if (i==this.date && this.mm==this.month && this.yy==this.year && (sevendaysaweek == 5 || sevendaysaweek == 6))
					td = this.getCell( "td", i, "today weekend" );
				else if (i==this.date && this.mm==this.month && this.yy==this.year)
					td = this.getCell( "td", i, "today" );
				else if (sevendaysaweek == 5 || sevendaysaweek == 6)
					td = this.getCell( "td", i, "weekend" );
				else
					td = this.getCell( "td", i, null ); 
 
				td.setDate = this.setDate;
				td.dd = i;
				td.mm = this.mm;
				td.yy = this.yy;
				td.onclick = function(e) {
					var currentDate = new Date(this.yy, this.mm, this.dd);
					this.setDate( currentDate );
				};
				tr.appendChild( td );
			}
 
			var daysNextMonth = 1;
			for (var i=sevendaysaweek; i<this.dayname.length; i++) 
				tr.appendChild( this.getCell( "td", daysNextMonth++, "next_month"  ) );
 
			tbody.appendChild( tr );
 
			while (tbody.getElementsByTagName("tr").length<6) {
				tr = document.createElement('tr');
				for (var i=0; i<this.dayname.length; i++) 
					tr.appendChild( this.getCell( "td", daysNextMonth++, "next_month"  ) );
				tbody.appendChild( tr );
			}
 
			return tbody;
 
		},
 
		this.setDate = function(date) {
			// Weiterverarbeitung des geklickten Datums
			//window.alert( date );
		}
 
		this.getCell = function(tag, str, cssClass) {
			var El = document.createElement( tag );
			El.appendChild(document.createTextNode( str ));
			if (cssClass != null)
				El.className = cssClass;
			return El;
		},
 
		this.switchMonth = function( s ){
			switch (s) {
				case "prev": 
					this.yy = (this.mm == 0)?this.yy-1:this.yy;
					this.mm = (this.mm == 0)?11:this.mm-1;
				break;
 
				case "next":
					this.yy = (this.mm == 11)?this.yy+1:this.yy;
					this.mm = (this.mm == 11)?0:this.mm+1;
				break;
 
				case "current":
					this.yy = this.year;
					this.mm = this.month;
				break;
			}
			this.show();
		}
	}
 
	var DOMContentLoaded = false;
	function addContentLoadListener (func) {
		if (document.addEventListener) {
			var DOMContentLoadFunction = function () {
				window.DOMContentLoaded = true;
				func();
			};
			document.addEventListener("DOMContentLoaded", DOMContentLoadFunction, false);
		}
		var oldfunc = (window.onload || new Function());
		window.onload = function () {
			if (!window.DOMContentLoaded) {
				oldfunc();
				func();
			}
		};
	}
 
	addContentLoadListener( function() { 
			new CalendarJS().init("calendar");
			//new CalendarJS().init("calendar", new Date(2009, 1, 15));
	} );