| commit | author | age | ||
| 749d1b | 1 | <!DOCTYPE html> |
| U | 2 | <html> |
| 3 | <head> | |
| 4 | <title>Kalender</title> | |
| 5 | <meta charset="UTF-8"> | |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 7 | <link rel="stylesheet" type="text/css" href="monatsbox.css"> | |
| 8 | <link rel="stylesheet" type="text/css" href="gestaltung.css"> | |
| 9 | </head> | |
| 10 | <body> | |
| 11 | <!-- Kopfzeile --> | |
| 12 | <div class="nord"> | |
| 13 | <div class="kalender-kopf"> | |
| 14 | <i class="icon-ellipsis-vert btn"></i> | |
| 15 | Jahreskalender | |
| 16 | <i class="icon-left-dir btn"></i> | |
| 17 | <span class="jahr-titel"></span> | |
| 18 | <i class="icon-right-dir btn"></i> | |
| 19 | </div> | |
| 20 | </div> | |
| 21 | <div class="inhalt"> | |
| 22 | <!-- zentraler Inhaltsbereich --> | |
| 23 | <div class="seite"></div> | |
| 24 | <div class="zentrum"> | |
| 25 | <div class="kalender">Kalender</div> | |
| 26 | </div> | |
| 27 | <div class="seite"></div> | |
| 28 | </div> | |
| 29 | <!-- Dialog-Bereich --> | |
| 30 | <div class="dialog"> | |
| 31 | <p> | |
| 32 | <a href="../">← Info zur Zeitrechnung aufrufen</a> | |
| 33 | <span class="cls-btn btn"><i class="icon-cancel"></i></span> | |
| 34 | </p> | |
| 35 | <p> | |
| 36 | Gehe zu Jahr: <input class="jahr-eingabe" type="text"> | |
| 37 | </p> | |
| 38 | <p> | |
| 39 | <i class="icon-undo btn">Heute</i> | |
| 40 | </p> | |
| 41 | </div> | |
| 42 | <!-- Fusszeile --> | |
| 43 | <div class="sued"> | |
| 44 | Copyright © <a href="https://uhilger.de">Ulrich Hilger</a>, alle Rechte vorbehalten | |
| 45 | </div> | |
| 46 | ||
| 47 | <script src="monatsbox.js"></script> | |
| 48 | <script src="kalender.js"></script> | |
| 49 | <script> | |
| 50 | var jahr; | |
| 51 | var fab = new KalenderFabrik(); | |
| 52 | document.addEventListener('DOMContentLoaded', function () { | |
| 53 | var jetzt = new Date(); | |
| 54 | jahr = jetzt.getFullYear(); | |
| 55 | kalenderZeigen(jahr); | |
| 56 | document.querySelector('.icon-left-dir').addEventListener('click', function() { | |
| 57 | kalenderZeigen(--jahr); | |
| 58 | }); | |
| 59 | document.querySelector('.icon-right-dir').addEventListener('click', function() { | |
| 60 | kalenderZeigen(++jahr); | |
| 61 | }); | |
| 62 | document.querySelector('.icon-undo').addEventListener('click', function() { | |
| 63 | var jetzt = new Date(); | |
| 64 | jahr = jetzt.getFullYear(); | |
| 65 | kalenderZeigen(jahr); | |
| 66 | }); | |
| 67 | document.querySelector('.icon-ellipsis-vert').addEventListener('click', function() { | |
| 68 | var dlg = document.querySelector(".dialog"); | |
| 69 | dlg.classList.add('dlg-open'); | |
| 70 | var cls = document.querySelector('.icon-cancel'); | |
| 71 | cls.addEventListener('click', function() { | |
| 72 | dlg.classList.remove('dlg-open'); | |
| 73 | cls.removeEventListener('click', this); | |
| 74 | }); | |
| 75 | }); | |
| 76 | document.querySelector('.jahr-eingabe').addEventListener('blur', function(event) { | |
| 77 | var eingabe = document.querySelector('.jahr-eingabe').value; | |
| 78 | if(!isNaN(eingabe)) { | |
| 79 | kalenderZeigen(eingabe); | |
| 80 | } | |
| 81 | }); | |
| 82 | var dlg = document.querySelector(".dialog"); | |
| 83 | dlg.classList.remove('dlg-open'); | |
| 84 | }); | |
| 85 | function kalenderZeigen(jahr) { | |
| 86 | var starttag = 1; // Montag | |
| 87 | var ruhetag = 0; // Sonntag | |
| 88 | var elem = document.querySelector('.kalender'); | |
| 89 | while(elem.firstChild) { | |
| 90 | elem.removeChild(elem.firstChild); | |
| 91 | } | |
| 92 | fab.kalenderErzeugen(elem, jahr, starttag, ruhetag); | |
| 93 | var jahrTitel = document.querySelector('.jahr-titel'); | |
| 94 | jahrTitel.textContent = jahr; | |
| 95 | } | |
| 96 | </script> | |
| 97 | </body> | |
| 98 | </html> | |
