nicht angemeldet
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\")'><<</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>
Matthias Scharwies