Roland Hentschel: selfhtml-wiki: Startseite

problematische Seite

Hi,

Ich weiß nicht, ob ich das hier an der richtigen Stelle poste; es geht mir jedenfalls nicht um ein Problem mit einer Seite, sondern nur um eine kleine Verbesserung an einem Script : Ich habe eine kleine Navigation in den Kalender eingebaut

<!DOCTYPE html>
<html>

<head>
<title>Frickl - SELFHTML-Wiki</title>
<meta charset="utf-8" />
<style type="text/css" media="screen">
table {
	width: 350px;
	font-family:arial, none-serif;
}

table,td,caption {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 0.4em;
	text-align: center;
}

td:nth-of-type(6),td:nth-of-type(7) {
	background: #ebf5d7;
	color: #666;
}

caption,tr:first-of-type {
	background: #666;
	color: #c4ced3;
	font-weight: bold;
}

caption a { text-decoration:none; color:#fff; padding:0 2em; }
caption a:hover { color:#f90; }

td.heute {
	color: red;
	font-weight: bold;
	background: #ffebe6;
}
</style>
</head>

<body>
	<h1>Monatskalender</h1>
	<main role="main">
		<table id="kalender"> </table>
	</main>
	<script type="text/javascript">
// dm und dj sind Monat und Jahr, die im Kalender dargestellt werden
// insbesondere könnte auch ein Monat gewählt werden, in dem das aktuelle Datum nicht vorkommt
		var d = new Date();
		var P = window.location.search.substr(1).split("&");
		var $J = null; var $M = null;
		for ( var n=0; n<P.length; n++) switch (P[n].split("=")[0]) {
			case "jahr"  : $J = parseInt(P[n].split("=")[1]); d=new Date($J,$M,1); break;
			case "monat" : $M = parseInt(P[n].split("=")[1])-1; d=new Date($J,$M,1); break;
		}
		var dm = d.getMonth() + 1;
		var dj = d.getYear() + 1900;

		var next = [(dm+13)%12];
		next[1] = next[0]==1 ? dj+1 : dj;
		var prev = (dm+11)%12==0 ? [12] : [(dm+11)%12];
		prev[1] = prev[0]==12 ? dj-1 : dj;

		function navigate(dir) {
			switch(dir){
				case "next" : self.location.href="JS-Kalender.htm?jahr="+next[1]+"&monat="+next[0]; break;
				case "prev" : self.location.href="JS-Kalender.htm?jahr="+prev[1]+"&monat="+prev[0]; break;
			}
		}
		Kalender(dm, dj);
		function Kalender(Monat, Jahr) {
			Monatsname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni",
				"Juli", "August", "September", "Oktober", "November", "Dezember");
			Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
// aktuelles Datum für die spätere Hervorhebung ermitteln
			var jetzt = new Date();
			var DieserMonat = jetzt.getMonth() + 1;
			var DiesesJahr = jetzt.getYear() + 1900;
			var DieserTag = jetzt.getDate();
// ermittle Wochentag des ersten Tags im Monat halte diese Information in Start fest
			var Zeit = new Date(Jahr, Monat - 1, 1);
			var Start = Zeit.getDay();
			if (Start > 0) {
				Start--;
			} else {
				Start = 6;
			}
// die meisten Monate haben 31 Tage...
			var Stop = 31;
// ...April (4), Juni (6), September (9) und November (11) haben nur 30 Tage...
			if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11) --Stop;
// ...und der Februar nur 28 Tage...
			if (Monat == 2) {
				Stop = Stop - 3;
// ...außer in Schaltjahren
				if (Jahr % 4 == 0) Stop++;
				if (Jahr % 100 == 0) Stop--;
				if (Jahr % 400 == 0) Stop++;
			}
			var tabelle = document.getElementById('kalender');
// schreibe Tabellenüberschrift
			var Monatskopf = "<a href='javascript:navigate(\"prev\")'>&lt;&lt;</a>" 
			+ Monatsname[Monat - 1] + " " + Jahr 
			+ "<a href='javascript:navigate(\"next\")'>&gt;&gt;</a>";
			var caption = tabelle.createCaption();
			caption.innerHTML = Monatskopf;
// schreibe Tabellenkopf
			var row = tabelle.insertRow(0);
			for (var i = 0; i <= 6; i++) {
				var cell = row.insertCell(i);
				cell.innerHTML = Tag[i];
			}
// ermittle Tag und schreibe Zeile
			var Tageszahl = 1;
			for (var i = 0; i <= 4; i++) {
				var row = tabelle.insertRow(1 + i);
				for (var j = 0; j <= 6; j++) {
// Zellen vor dem Start-Tag in der ersten Zeile und Zeilen nach dem Stop-Tag werden leer aufgefüllt
					if (((i == 0) && (j <= 5) && (j < Start)) || (Tageszahl > Stop)) {
						var cell = row.insertCell(j);
						cell.innerHTML = ' ';
					} else {
// normale Zellen werden mit der Tageszahl befüllt und mit der Klasse Kalendertag markiert
						var cell = row.insertCell(j);
						cell.innerHTML = Tageszahl;
						cell.className = 'kalendertag'
// und der aktuelle Tag (heute) wird noch einmal speziell mit der Klasse "heute" markiert
						if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl ==
								DieserTag)) {
							cell.className = cell.className + ' heute';
						}
						Tageszahl++;
					}
				}
			}
		}
	</script>
</body>

</html>

  1. problematische Seite

    Sorry,

    hatte noch einen Bug in der Navigation : richtig muß es so heißen :

    <!DOCTYPE html>
    <html>
    <!--// https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:JS-Anwendung-Monatskalender.html //!-->
    <head>
    <title>Frickl - SELFHTML-Wiki</title>
    <meta charset="utf-8" />
    <style type="text/css" media="screen">
    table {
    	width: 350px;
    	font-family:arial, none-serif;
    }
    
    table,td,caption {
    	border: 1px solid black;
    	border-collapse: collapse;
    	padding: 0.4em;
    	text-align: center;
    }
    
    td:nth-of-type(6),td:nth-of-type(7) {
    	background: #ebf5d7;
    	color: #666;
    }
    
    caption,tr:first-of-type {
    	background: #666;
    	color: #c4ced3;
    	font-weight: bold;
    }
    
    caption a { text-decoration:none; color:#fff; padding:0 2em; }
    caption a:hover { color:#f90; }
    
    td.heute {
    	color: red;
    	font-weight: bold;
    	background: #ffebe6;
    }
    </style>
    </head>
    
    <body>
    	<h1>Monatskalender</h1>
    	<main role="main">
    		<table id="kalender"> </table>
    	</main>
    	<script type="text/javascript">
    // dm und dj sind Monat und Jahr, die im Kalender dargestellt werden
    // insbesondere könnte auch ein Monat gewählt werden, in dem das aktuelle Datum nicht vorkommt
    		var d = new Date();
    		var P = window.location.search.substr(1).split("&");
    		var $J = null; var $M = null;
    		for ( var n=0; n<P.length; n++) switch (P[n].split("=")[0]) {
    			case "jahr"  : $J = parseInt(P[n].split("=")[1]); d=new Date($J,$M,1); break;
    			case "monat" : $M = parseInt(P[n].split("=")[1])-1; d=new Date($J,$M,1); break;
    		}
    		var dm = d.getMonth() + 1;
    		var dj = d.getYear() + 1900;
    
    		var next = dm+1==13 ? [1] : [dm+1];
    		next[1] = next[0]==1 ? dj+1 : dj;
    		var prev = dm-1==0 ? [12] : [dm-1];
    		prev[1] = prev[0]==12 ? dj-1 : dj;
    
    		function navigate(dir) {
    			switch(dir){
    				case "next" : self.location.href="JS-Kalender.htm?jahr="+next[1]+"&monat="+next[0]; break;
    				case "prev" : self.location.href="JS-Kalender.htm?jahr="+prev[1]+"&monat="+prev[0]; break;
    			}
    		}
    
    		Kalender(dm, dj);
    		function Kalender(Monat, Jahr) {
    			Monatsname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni",
    				"Juli", "August", "September", "Oktober", "November", "Dezember");
    			Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
    // aktuelles Datum für die spätere Hervorhebung ermitteln
    			var jetzt = new Date();
    			var DieserMonat = jetzt.getMonth() + 1;
    			var DiesesJahr = jetzt.getYear() + 1900;
    			var DieserTag = jetzt.getDate();
    // ermittle Wochentag des ersten Tags im Monat halte diese Information in Start fest
    			var Zeit = new Date(Jahr, Monat - 1, 1);
    			var Start = Zeit.getDay();
    			if (Start > 0) {
    				Start--;
    			} else {
    				Start = 6;
    			}
    // die meisten Monate haben 31 Tage...
    			var Stop = 31;
    // ...April (4), Juni (6), September (9) und November (11) haben nur 30 Tage...
    			if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11) --Stop;
    // ...und der Februar nur 28 Tage...
    			if (Monat == 2) {
    				Stop = Stop - 3;
    // ...außer in Schaltjahren
    				if (Jahr % 4 == 0) Stop++;
    				if (Jahr % 100 == 0) Stop--;
    				if (Jahr % 400 == 0) Stop++;
    			}
    			var tabelle = document.getElementById('kalender');
    // schreibe Tabellenüberschrift
    			var Monatskopf = "<a href='javascript:navigate(\"prev\")'>&lt;&lt;</a>" 
    			+ Monatsname[Monat - 1] + " " + Jahr 
    			+ "<a href='javascript:navigate(\"next\")'>&gt;&gt;</a>";
    			var caption = tabelle.createCaption();
    			caption.innerHTML = Monatskopf;
    // schreibe Tabellenkopf
    			var row = tabelle.insertRow(0);
    			for (var i = 0; i <= 6; i++) {
    				var cell = row.insertCell(i);
    				cell.innerHTML = Tag[i];
    			}
    // ermittle Tag und schreibe Zeile
    			var Tageszahl = 1;
    			for (var i = 0; i <= 4; i++) {
    				var row = tabelle.insertRow(1 + i);
    				for (var j = 0; j <= 6; j++) {
    // Zellen vor dem Start-Tag in der ersten Zeile und Zeilen nach dem Stop-Tag werden leer aufgefüllt
    					if (((i == 0) && (j <= 5) && (j < Start)) || (Tageszahl > Stop)) {
    						var cell = row.insertCell(j);
    						cell.innerHTML = ' ';
    					} else {
    // normale Zellen werden mit der Tageszahl befüllt und mit der Klasse Kalendertag markiert
    						var cell = row.insertCell(j);
    						cell.innerHTML = Tageszahl;
    						cell.className = 'kalendertag'
    // und der aktuelle Tag (heute) wird noch einmal speziell mit der Klasse "heute" markiert
    						if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl ==
    								DieserTag)) {
    							cell.className = cell.className + ' heute';
    						}
    						Tageszahl++;
    					}
    				}
    			}
    		}
    	</script>
    </body>
    
    </html>
    
    
    
  2. problematische Seite

    Servus!

    var Monatskopf = "<a href='javascript:navigate(\"prev\")'>&lt;&lt;</a>" 
                            + Monatsname[Monat - 1] + " " + Jahr 
                            + "<a href='javascript:navigate(\"next\")'>&gt;&gt;</a>";
    

    Du beziehst dich nicht auf die Wiki-Startseite sondern den JavaScript/Anwendung und Praxis/Monatskalender.

    Im Augenblick verlinkt der Pfeil zwar auf eine webseite :JS-Kalender.htm?jahr=2016&monat=1, öffnet aber keinen neuen Monatskalender.

    Hier wäre der Aufruf der Funktion kalender() mit den neuen Werten (jahr=2016&monat=1) besser.

    Herzliche Grüße und einen guten Rutsch

    Matthias Scharwies