selfhtml-wiki: Startseite bearbeitet von Roland Hentschel 29.12.2015 11:57 Sorry, hatte noch einen Bug in der Navigation : richtig muß es so heißen : ~~~html <!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\")'><<</a>" + Monatsname[Monat - 1] + " " + Jahr + "<a href='javascript:navigate(\"next\")'>>></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> ~~~
selfhtml-wiki: Startseite bearbeitet von Roland Hentschel 29.12.2015 12:06 Sorry, hatte noch einen Bug in dewr Navigation : richtig muß es so heißen : ~~~html <!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\")'><<</a>" + Monatsname[Monat - 1] + " " + Jahr + "<a href='javascript:navigate(\"next\")'>>></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> ~~~
selfhtml-wiki: Startseite bearbeitet von Roland Hentschel 29.12.2015 12:05 Sorry, hatte noch einen Bug in dewr Navigation : richtig muß es so heißen : ~~~html <!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\")'><<</a>" + Monatsname[Monat - 1] + " " + Jahr + "<a href='javascript:navigate(\"next\")'>>></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> ~~~
selfhtml-wiki: Startseite bearbeitet von Roland Hentschel 29.12.2015 12:03 Sorry, hatte noch einen Bug in dewr Navigation : richtig muß es so heißen : ~~~html <!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+13)%12==0 ? [1] : [(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\")'><<</a>" + Monatsname[Monat - 1] + " " + Jahr + "<a href='javascript:navigate(\"next\")'>>></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> ~~~
nicht angemeldet nicht angemeldet
