<!DOCTYPE html>
|
<html>
|
<head>
|
<title>Monatsbox-Demo</title>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link rel="stylesheet" type="text/css" href="monatsbox.css">
|
<link rel="stylesheet" type="text/css" href="stile.css">
|
</head>
|
<body>
|
<h3>Monatsbox-Demo</h3>
|
|
<p>
|
Diese Demoseite zeigt die Monatsbox in Aktion. Die Bedienelemente
|
können direkt in der Seite ausprobiert werden. Einzelheiten
|
zu deren Funktionsweise erläutert die <a href="https://uhilger.de/data/pg/monatsbox/">Produktseite</a>.
|
</p>
|
|
<h4><span class="monat"></span> <span class="jahr"></span></h4>
|
<div class="nav"><a onclick="zurueck()">←</a> <a onclick="vor()">→</a></div>
|
<div class="monatsbox">Monatsbox</div>
|
<div class="datum-anzeige">Gewähltes Datum: <span class="datum-wahl">-</span></div>
|
<div class="ereignis-eingabe">Tage mit Ereignissen:
|
<input class="ereignisliste" type="text" onkeyup="ereignisseDarstellen()">
|
<br/> <span class="kleiner">(mit Komma getrennt, z.B. 3,7,19)</span>
|
</div>
|
<div>
|
<label>Ruhetag:
|
<select id="rtag" size="1" onchange="rtagWechsel()">
|
<option value="0">Sonntag</option>
|
<option value="1">Montag</option>
|
<option value="2">Dienstag</option>
|
<option value="3">Mittwoch</option>
|
<option value="4">Donnerstag</option>
|
<option value="5">Freitag</option>
|
<option value="6">Samstag</option>
|
</select>
|
</label>
|
</div>
|
<div>
|
<label>Erster Tag:
|
<select id="etag" size="1" onchange="etagWechsel()">
|
<option value="1">Montag</option>
|
<option value="2">Dienstag</option>
|
<option value="3">Mittwoch</option>
|
<option value="4">Donnerstag</option>
|
<option value="5">Freitag</option>
|
<option value="6">Samstag</option>
|
<option value="0">Sonntag</option>
|
</select>
|
</label>
|
</div>
|
<script src="monatsbox.js"></script>
|
<script>
|
var jahr;
|
var monat;
|
var starttag = 1;
|
var ruhetag = 0;
|
var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai",
|
"Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
var tagesnamen = new Array("Sonntag","Montag", "Dienstag", "Mittwoch",
|
"Donnerstag", "Freitag", "Samstag");
|
var fabrik = new MonatsboxFabrik();
|
var ereignisse = new Map;
|
document.addEventListener('DOMContentLoaded', function () {
|
document.querySelector('.ereignisliste').value = '';
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
monat = jetzt.getMonth();
|
boxAnzeigen();
|
});
|
|
function zurueck() {
|
if(--monat < 0) {
|
--jahr;
|
monat = 11;
|
}
|
boxAnzeigen();
|
}
|
|
function vor() {
|
if(++monat > 11) {
|
++jahr;
|
monat = 0;
|
}
|
boxAnzeigen();
|
}
|
|
function ereignisseDarstellen() {
|
var ereignisInhalt = document.querySelector('.ereignisliste').value;
|
ereignisse = new Map;
|
var teile = ereignisInhalt.split(',');
|
for(var i = 0; i < teile.length; i++) {
|
ereignisse.set(Number(teile[i]), 'monatsboxFeiertag');
|
}
|
boxAnzeigen();
|
}
|
|
function rtagWechsel() {
|
ruhetag = Number(document.querySelector('#rtag').value);
|
boxAnzeigen();
|
}
|
|
function etagWechsel() {
|
starttag = Number(document.querySelector('#etag').value);
|
boxAnzeigen();
|
}
|
|
function boxAnzeigen() {
|
document.querySelector('.jahr').textContent = jahr;
|
document.querySelector('.monat').textContent = monatsnamen[monat];
|
var elem = document.querySelector('.monatsbox');
|
elem.removeChild(elem.firstChild);
|
document.querySelector('.datum-wahl').textContent = 'Kein Datum ausgewählt.';
|
elem.appendChild(fabrik.monatsboxErzeugen(jahr, monat, starttag, ruhetag, ereignisse, function(event) {
|
var d = fabrik.datum(event);
|
document.querySelector('.datum-wahl').textContent =
|
d.toLocaleDateString('de-DE') + ' (' +
|
d.toISOString() + ')';
|
}));
|
}
|
</script>
|
</body>
|
</html>
|
