view | history | commit | commitdiff
ulrich
2021-11-28 aec40e9562272fb227671e9ff5320fcd078b2c77
commit | author | age
231393 1 <!DOCTYPE html>
U 2 <html>
3   <head>
4     <title>Monatsbox-Demo</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="stile.css">    
9   </head>
10   <body>
11     <h3>Monatsbox-Demo</h3>    
12     
13     <p>
14       Diese Demoseite zeigt die Monatsbox in Aktion. Die Bedienelemente 
15       k&ouml;nnen direkt in der Seite ausprobiert werden. Einzelheiten 
aec40e 16       zu deren Funktionsweise erläutert die <a href="https://uhilger.de/data/pg/monatsbox/">Produktseite</a>.
231393 17     </p>
U 18     
19     <h4><span class="monat"></span>&nbsp;<span class="jahr"></span></h4>
20     <div class="nav"><a onclick="zurueck()">&larr;</a>&nbsp;<a onclick="vor()">&rarr;</a></div>
21     <div class="monatsbox">Monatsbox</div>
22     <div class="datum-anzeige">Gew&auml;hltes Datum: <span class="datum-wahl">-</span></div>
23     <div class="ereignis-eingabe">Tage mit Ereignissen: 
24       <input class="ereignisliste" type="text" onkeyup="ereignisseDarstellen()">
25       <br/>&nbsp;&nbsp;<span class="kleiner">(mit Komma getrennt, z.B. 3,7,19)</span>
26     </div>    
27     <div>
28       <label>Ruhetag: 
29         <select id="rtag" size="1" onchange="rtagWechsel()">
30           <option value="0">Sonntag</option>
31           <option value="1">Montag</option>
32           <option value="2">Dienstag</option>
33           <option value="3">Mittwoch</option>
34           <option value="4">Donnerstag</option>
35           <option value="5">Freitag</option>
36           <option value="6">Samstag</option>
37         </select>
38       </label>      
39     </div>
40     <div>
41       <label>Erster Tag: 
42         <select id="etag" size="1" onchange="etagWechsel()">
43           <option value="1">Montag</option>
44           <option value="2">Dienstag</option>
45           <option value="3">Mittwoch</option>
46           <option value="4">Donnerstag</option>
47           <option value="5">Freitag</option>
48           <option value="6">Samstag</option>
49           <option value="0">Sonntag</option>
50         </select>
51       </label>      
52     </div>
53     <script src="monatsbox.js"></script>
54     <script>
55       var jahr;
56       var monat;
57       var starttag = 1;
58       var ruhetag = 0;
59       var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai", 
60           "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
61       var tagesnamen = new Array("Sonntag","Montag", "Dienstag", "Mittwoch", 
62           "Donnerstag", "Freitag", "Samstag");
63       var fabrik = new MonatsboxFabrik();
64       var ereignisse = new Map;
65       document.addEventListener('DOMContentLoaded', function () {        
66         document.querySelector('.ereignisliste').value = '';
67         var jetzt = new Date();
68         jahr = jetzt.getFullYear();
69         monat = jetzt.getMonth();
70         boxAnzeigen();
71       });      
72       
73       function zurueck() {
74         if(--monat < 0) {
75           --jahr;
76           monat = 11;
77         }
78         boxAnzeigen();
79       }
80       
81       function vor() {
82         if(++monat > 11) {
83           ++jahr;
84           monat = 0;
85         }
86         boxAnzeigen();
87       }
88       
89       function ereignisseDarstellen() {
90         var ereignisInhalt = document.querySelector('.ereignisliste').value;
91         ereignisse = new Map;
92         var teile = ereignisInhalt.split(',');
93         for(var i = 0; i < teile.length; i++) {
94           ereignisse.set(Number(teile[i]), 'monatsboxFeiertag');
95         }
96         boxAnzeigen();
97       }
98       
99       function rtagWechsel() {
100         ruhetag = Number(document.querySelector('#rtag').value);
101         boxAnzeigen();
102       }
103       
104       function etagWechsel() {
105         starttag = Number(document.querySelector('#etag').value);
106         boxAnzeigen();
107       }
108       
109       function boxAnzeigen() {
110         document.querySelector('.jahr').textContent = jahr;
111         document.querySelector('.monat').textContent = monatsnamen[monat];
112         var elem = document.querySelector('.monatsbox');
113         elem.removeChild(elem.firstChild);
114         document.querySelector('.datum-wahl').textContent = 'Kein Datum ausgewählt.';
115         elem.appendChild(fabrik.monatsboxErzeugen(jahr, monat, starttag, ruhetag, ereignisse, function(event) {
116           var d = fabrik.datum(event);
117           document.querySelector('.datum-wahl').textContent = 
118                   d.toLocaleDateString('de-DE') + ' (' + 
119                   d.toISOString() + ')';
120         }));        
121       }
122     </script>
123   </body>
124 </html>