CalendarJS -> Design ändern (Scriptsprachen)

Dodo @, Dienstag, 05. Januar 2010, 12:19 (vor 247 Tagen)

Hallo,

vorweg: Super Kalender! Ich habe lange gesucht und nun gefunden. ;)

Ich möchte den Kalender nun an meine Seite anpassen. Dafür reichen mir reine Änderungen im Stylesheet allerdings nicht. Nun habe ich leider kaum Ahnung von JS und bräuchte Hilfe.

In HTML sollte der Kalender dann später so aussehen:

<div id="calendar">
<h3 class="catbg centertext">
<span class="left"></span>
<span class="last_month" title="vorheriger Monat" style="cursor: pointer; float: left;">&laquo;</span>
<span class="next_month" title="n&auml;chster Monat" style="cursor: pointer; float: right;">&raquo;</span>
Januar 2010
</hr>
<table>
<thead>
<tr>
<th class="titlebg2 days">Mo</th>
<th class="titlebg2 days">Di</th>
<th class="titlebg2 days">Mi</th>
<th class="titlebg2 days">Do</th>
<th class="titlebg2 days">Fr</th>
<th class="titlebg2 days">Sa</th>
<th class="titlebg2 days">So</th>
</tr>
</thead>
<tbody>
*Hier stelle man sich jetzt den Inhalt des Kalenders vor*
</tbody>
</table>
</div>

Von den Funktionen sollte alles so bleiben wie es ist. Die einzige wirkliche Änderung ist, dass der Kopfbereich verändert wurde.

Wäre echt super, wenn mir jemand helfen könnte, bin schon leicht am verzweifeln.

CalendarJS mit anderer HTML Struktur

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));
	} );
 

--
kostenlose Scripte und Software nicht nur für Geodäten || Portal für Geodäten mit angeschlossenem Forum-Vermessung

Tags:
Calendar, Kalender, JavaScript

CalendarJS mit anderer HTML Struktur

Dodo @, Dienstag, 05. Januar 2010, 14:08 (vor 247 Tagen) @ Micha

Hallo,

bis auf einen kleinen Fehler funktioniert es. Ich bekomme im IE8 und auch im Firebug immer "'this.tableNavi.childNodes.2.nodeValue.length' ist Null oder kein Objekt calendar_js.js, Zeile 79 Zeichen 4" ausgespuckt.

Zum leeren SPAN, das wird für abgerunde Ecken benötigt. ;) Ich habe es versucht, aber ich bekomme es nicht eingefügt.:-(

Schon mal vielen DANK!

Gruß Dodo

CalendarJS mit anderer HTML Struktur

Micha ⌂, Karlsruhe, Dienstag, 05. Januar 2010, 14:35 (vor 247 Tagen) @ Dodo

Hallo,

Ich bekomme im IE8 und auch im Firebug immer "'this.tableNavi.childNodes.2.nodeValue.length' ist Null oder kein Objekt

Ich habe es mit Opera, FF und dem IE probiert - keine Fehlermeldung. Firebug habe und nutze ich nicht, da es bei JS Problemen mir nicht mehr hilft als als die Fehlerkonsole.

Ich habe den Code noch mal umgeschrieben, teste ihn bitte noch mal!

Zum leeren SPAN, das wird für abgerunde Ecken benötigt. ;)

Struktur und Designtrennung ;-)

Dein SPAN ist dabei...

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);
 
			var textKnoten = this.tableNavi.firstChild;
			while (textKnoten != null) {
				if (textKnoten.nodeType == 3) {
					textKnoten.replaceData(0, textKnoten.nodeValue.length, this.monthname[this.mm]+" "+this.yy);
					break;
				}
				textKnoten = textKnoten.nextSibling;
			}
 
			//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 = "left";
			h3.appendChild( span );
 
			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));
	} );

--
kostenlose Scripte und Software nicht nur für Geodäten || Portal für Geodäten mit angeschlossenem Forum-Vermessung

Tags:
Calendar, Kalender, JavaScript

CalendarJS mit anderer HTML Struktur

Dodo, Dienstag, 05. Januar 2010, 14:48 (vor 247 Tagen) @ Micha

Läuft perfekt. Danke viel Mals.:-D

RSS-Feed dieser Diskussion