selfhtml-wiki: Startseite von Roland Hentschel, 29.12.2015 11:31

selfhtml-wiki: Startseite

Roland Hentschel 29.12.2015 11:31 (Versionen)

selfhtml-wiki

+1 Informationen zu den Bewertungsregeln

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>

Beitrag melden

+1 Informationen zu den Bewertungsregeln

selfhtml-wiki: Startseite

Roland Hentschel 29.12.2015 11:57 (Versionen)

selfhtml-wiki

– Informationen zu den Bewertungsregeln

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>

Beitrag melden

– Informationen zu den Bewertungsregeln

selfhtml-wiki: Startseite
Matthias Scharwies 29.12.2015 12:36 (Versionen)

selfhtml-wiki
– Informationen zu den Bewertungsregeln
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
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Roland Hentschel: selfhtml-wiki: Startseite

selfhtml-wiki: Startseite

selfhtml-wiki: Startseite

selfhtml-wiki: Startseite

selfhtml-wiki: Startseite