<!DOCTYPE html>
|
<html>
|
<head>
|
<title>Kalender</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="gestaltung.css">
|
</head>
|
<body>
|
<!-- Kopfzeile -->
|
<div class="nord">
|
<div class="kalender-kopf">
|
<i class="icon-ellipsis-vert btn"></i>
|
Jahreskalender
|
<i class="icon-left-dir btn"></i>
|
<span class="jahr-titel"></span>
|
<i class="icon-right-dir btn"></i>
|
</div>
|
</div>
|
<div class="inhalt">
|
<!-- zentraler Inhaltsbereich -->
|
<div class="seite"></div>
|
<div class="zentrum">
|
<div class="kalender">Kalender</div>
|
</div>
|
<div class="seite"></div>
|
</div>
|
<!-- Dialog-Bereich -->
|
<div class="dialog">
|
<p>
|
<a href="../">← Info zur Zeitrechnung aufrufen</a>
|
<span class="cls-btn btn"><i class="icon-cancel"></i></span>
|
</p>
|
<p>
|
Gehe zu Jahr: <input class="jahr-eingabe" type="text">
|
</p>
|
<p>
|
<i class="icon-undo btn">Heute</i>
|
</p>
|
</div>
|
<!-- Fusszeile -->
|
<div class="sued">
|
Copyright © <a href="https://uhilger.de">Ulrich Hilger</a>, alle Rechte vorbehalten
|
</div>
|
|
<script src="monatsbox.js"></script>
|
<script src="kalender.js"></script>
|
<script>
|
var jahr;
|
var fab = new KalenderFabrik();
|
document.addEventListener('DOMContentLoaded', function () {
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
kalenderZeigen(jahr);
|
document.querySelector('.icon-left-dir').addEventListener('click', function() {
|
kalenderZeigen(--jahr);
|
});
|
document.querySelector('.icon-right-dir').addEventListener('click', function() {
|
kalenderZeigen(++jahr);
|
});
|
document.querySelector('.icon-undo').addEventListener('click', function() {
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
kalenderZeigen(jahr);
|
});
|
document.querySelector('.icon-ellipsis-vert').addEventListener('click', function() {
|
var dlg = document.querySelector(".dialog");
|
dlg.classList.add('dlg-open');
|
var cls = document.querySelector('.icon-cancel');
|
cls.addEventListener('click', function() {
|
dlg.classList.remove('dlg-open');
|
cls.removeEventListener('click', this);
|
});
|
});
|
document.querySelector('.jahr-eingabe').addEventListener('blur', function(event) {
|
var eingabe = document.querySelector('.jahr-eingabe').value;
|
if(!isNaN(eingabe)) {
|
kalenderZeigen(eingabe);
|
}
|
});
|
var dlg = document.querySelector(".dialog");
|
dlg.classList.remove('dlg-open');
|
});
|
function kalenderZeigen(jahr) {
|
var starttag = 1; // Montag
|
var ruhetag = 0; // Sonntag
|
var elem = document.querySelector('.kalender');
|
while(elem.firstChild) {
|
elem.removeChild(elem.firstChild);
|
}
|
fab.kalenderErzeugen(elem, jahr, starttag, ruhetag);
|
var jahrTitel = document.querySelector('.jahr-titel');
|
jahrTitel.textContent = jahr;
|
}
|
</script>
|
</body>
|
</html>
|
