Alles erst mal soweit fertig

public/javascripts/script.js

@@ -1,50 +1,57 @@
 document.addEventListener('DOMContentLoaded', async function () {
-    const  DateTime = luxon.DateTime;
-    let curdate = ''
 
-    const dt = DateTime.now()
-    const dt1 = dt.plus({month:1})
-    curdate = `${dt.toFormat('LLLL')}/${dt1.toFormat('LLLL_y')}`
-    document.querySelector('#curmon').innerHTML = curdate.replace('_',' ')
+    const DateTime = luxon.DateTime
 
-
-    initSchema('2023-05-01')
+    if (sysParams.doinit) {
+        await initSchema('2023-05-01')
+    }
 
     let ret = await getData()
-    fillSchema(ret.data)
+    let schema = ret.data
+    fillSchema(schema)
 
     document.querySelector('#sptab').addEventListener('click',  markField);	  
 
-    function markField (e) { 
+    async function markField (e) {
         let field = e.target;
-        field.setAttribute('aria-label','x'); 
+        let d = schema.data[34].day
+        field.setAttribute('aria-label','x');
         field.setAttribute('disabled','disabled');
-        let data = {curdate: curdate}
-        let setArray = []
-        let fields = document.querySelectorAll('#sptab button')
-        for (i = 0; i < fields.length; i++) {
-            let status = { day: fields[i].innerHTML, status: false }
-            if (fields[i].hasAttribute('disabled')) {
-                status.status = true
-            }
-            setArray.push(status)
-        }
-        data.data = setArray
-        storeData(data)
+        schema.data[parseInt(field.id.slice(2))-1].status = true
+        await storeData(schema)
         if (e.srcElement.id === 'bt35') {
-            showNextMonth(e.srcElement.innerHTML)
+            let ldt = DateTime.fromISO(d)
+            ldt = ldt.plus({day: 1})
+            await initSchema(ldt.toFormat('y-LL-dd'))
         }
     }
 
-    function fillSchema(data) {
-        const setArray = data.data
+    function fillSchema(schema) {
+        const setArray = schema.data
+        let months = ''
+        for (let x of schema.months) {
+            months += x + ' - '
+        }
+        months = months.slice(0, -3)
+        months += ' '
+        for (let x of schema.years) {
+            months += x + '/'
+        }
+        months = months.slice(0, -1)
+        document.querySelector('#curmon').innerHTML = months
         for(let i = 0; i < 35; i++) {
             let sel = '#bt'+(i+1)
+            let day = DateTime.fromISO(setArray[i].day)
             if (setArray[i].day !== '') {
-                document.querySelector(sel).innerHTML = DateTime.fromISO(setArray[i].day).toFormat('d')
+                let x = `${day.toFormat('d')}
+                    <br /><span class="small">${day.setLocale('de').toFormat('ccc')}</span>`
+                document.querySelector(sel).innerHTML = x
                 if (setArray[i].status) {
                     document.querySelector(sel).setAttribute('aria-label', 'x')
                     document.querySelector(sel).setAttribute('disabled', 'disabled')
+                } else {
+                    document.querySelector(sel).setAttribute('aria-label', '')
+                    document.querySelector(sel).removeAttribute('disabled')
                 }
             } else {
                 document.querySelector(sel).setAttribute('disabled', 'disabled')
@@ -52,12 +59,12 @@ document.addEventListener('DOMContentLoaded', async function () {
         }
     }
 
-    async function getData() {
+    async function getData(testing) {
         let erg = await fetch('data')
         return erg.json()
     }
 
-    async function storeData(data) {
+    async function storeData(data, testing) {
         const response = await fetch('/data', {
             method: "POST",
             body: JSON.stringify(data),
@@ -68,17 +75,11 @@ document.addEventListener('DOMContentLoaded', async function () {
         return response.json()
     }
 
-    function showNextMonth() {
-        const dt = DateTime.now()
-        const dt1 = dt.plus({month:1})
-        curdate = `${dt.toFormat('LLLL')}/${dt1.toFormat('LLLL_y')}`
-        document.querySelector('#curmon').innerHTML = curdate.replace('_',' ')
 
-                fillSchema(ret.data)
-    }
-
-    function initSchema(startdate) {
+    async function initSchema(startdate) {
         let setArray = []
+        let monthArray = []
+        let yearsArray = []
         let ld0 = DateTime.fromISO(startdate)
         let k = 0
         for(let i = 0; i < 35; i++) {
@@ -88,12 +89,20 @@ document.addEventListener('DOMContentLoaded', async function () {
             } else {
                 let ld = ld0.plus({day: k})
                 elem.day = ld.toFormat('y-LL-dd')
+                let month = ld.setLocale('de').toFormat('LLLL')
+                let year = ld.toFormat('y')
+                if (monthArray.indexOf(month) === -1) {
+                    monthArray.push(month)
+                }
+                if (yearsArray.indexOf(year) === -1) {
+                    yearsArray.push(year)
+                }
                 k++
             }
             setArray.push(elem)
         }
-        let data = {curdate: startdate, data: setArray}
-        storeData(data)
+        let schema = {curdate: startdate, months: monthArray, years: yearsArray, data: setArray}
+        await storeData(schema)
     }
 
 });

public/stylesheets/style.css

@@ -41,3 +41,17 @@ a {
 .spritztab [aria-label="x"] {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.1%22%20x2%3D%220.9%22%20y2%3D%220.9%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.9%22%20x2%3D%220.9%22%20y2%3D%220.1%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E');
 }
+
+.small {
+  font-size: 60%;
+  color: gray;
+}
+
+footer {
+  width: 70vmin;
+  margin: auto;
+}
+#v {
+  text-align: right;
+  margin-top: 30px;
+}