Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierungen: Manuelle Zurücksetzung Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
<!DOCTYPE html>
<html lang="de">
<html lang="de">
<head>
<head>
Zeile 81: Zeile 79:
     const empty = document.createElement("div");
     const empty = document.createElement("div");
     calendar.appendChild(empty);
     calendar.appendChild(empty);
}
```javascript
function renderDay(cell, day, data) {
    cell.innerHTML = `
        <div class="day-number">${day}</div>
        <div class="note">
            <strong>Was:</strong><br>
            ${data.was || "-"}<br><br>
            <strong>Wann:</strong><br>
            ${data.wann || "-"}<br><br>
            <strong>Zielgruppe:</strong><br>
            ${data.zielgruppe || "-"}<br><br>
            <strong>Wo:</strong><br>
            ${data.wo || "-"}<br><br>
            <strong>Anmeldung:</strong><br>
            ${data.anmeldung || "-"}<br><br>
            <strong>Link:</strong><br>
            ${
                data.link
                ? `<a href="${data.link}" target="_blank">öffnen</a>`
                : "-"
            }
        </div>
    `;
}
}


// Tage erzeugen
// Tage erzeugen
for(let day = 1; day <= 31; day++) {
for (let day = 1; day <= 31; day++) {


     const cell = document.createElement("div");
     const cell = document.createElement("div");
Zeile 90: Zeile 118:


     const key = "august2026_" + day;
     const key = "august2026_" + day;
    const savedText = localStorage.getItem(key) || "";


     cell.innerHTML = `
     const savedData = JSON.parse(
         <div class="day-number">${day}</div>
         localStorage.getItem(key) || "{}"
        <div class="note">${savedText}</div>
    );
     `;
 
     renderDay(cell, day, savedData);


     cell.addEventListener("click", () => {
     cell.addEventListener("click", () => {
         const current = localStorage.getItem(key) || "";
 
         const text = prompt(
         const data = JSON.parse(
             "Eintrag für den " + day + ". August 2026:",
            localStorage.getItem(key) || "{}"
             current
        );
 
         const was = prompt("Was:", data.was || "");
        if (was === null) return;
 
        const wann = prompt("Wann:", data.wann || "");
        if (wann === null) return;
 
        const zielgruppe = prompt(
            "Zielgruppe:",
             data.zielgruppe || ""
        );
        if (zielgruppe === null) return;
 
        const wo = prompt(
            "Wo:",
             data.wo || ""
         );
         );
        if (wo === null) return;


         if(text !== null) {
        const anmeldung = prompt(
             localStorage.setItem(key, text);
            "Anmeldung:",
             cell.querySelector(".note").textContent = text;
            data.anmeldung || ""
         }
        );
        if (anmeldung === null) return;
 
        const link = prompt(
            "Link:",
            data.link || ""
        );
         if (link === null) return;
 
        const newData = {
             was,
            wann,
            zielgruppe,
            wo,
            anmeldung,
            link
        };
 
        localStorage.setItem(
            key,
             JSON.stringify(newData)
        );
 
         renderDay(cell, day, newData);
     });
     });


     calendar.appendChild(cell);
     calendar.appendChild(cell);
}
}
</script>
</body>
</html>

Version vom 9. Juni 2026, 09:08 Uhr

<html lang="de"> <head> <meta charset="UTF-8"> <title>Familienangebote August 2026</title>

<style> body { 

   font-family: Arial, sans-serif;
   margin: 20px;

}

h2 { 

   text-align: center;

}

.calendar { 

   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 8px;

}

.weekday { 

   font-weight: bold;
   text-align: center;
   padding: 10px;
   background: #f0f0f0;

}

.day { 

   border: 1px solid #ccc;
   min-height: 120px;
   padding: 8px;
   cursor: pointer;
   background: #fff;
   transition: 0.2s;

}

.day:hover { 

   background: #f8f8f8;

}

.day-number { 

   font-weight: bold;
   margin-bottom: 5px;

}

.note { 

   font-size: 13px;
   white-space: pre-wrap;

} </style>

</head> <body>

Familienangebote – August 2026

<script> const calendar = document.getElementById("calendar");

const weekdays = [ 

   "Mo","Di","Mi","Do","Fr","Sa","So"

];

weekdays.forEach(day => { 

   const el = document.createElement("div");
   el.className = "weekday";
   el.textContent = day;
   calendar.appendChild(el);

});

// August 2026 beginnt an einem Samstag const firstDayOffset = 5;

// Leere Felder vor dem 1. August for(let i = 0; i < firstDayOffset; i++){ 

   const empty = document.createElement("div");
   calendar.appendChild(empty);

} ```javascript function renderDay(cell, day, data) { 

   cell.innerHTML = `
${day}
           Was:

           ${data.was || "-"}



           Wann:

           ${data.wann || "-"}



           Zielgruppe:

           ${data.zielgruppe || "-"}



           Wo:

           ${data.wo || "-"}



           Anmeldung:

           ${data.anmeldung || "-"}



           Link:

           ${
               data.link
               ? `<a href="${data.link}" target="_blank">öffnen</a>`
               : "-"
           }

   `;

}

// Tage erzeugen for (let day = 1; day <= 31; day++) { 

   const cell = document.createElement("div");
   cell.className = "day";

   const key = "august2026_" + day;

   const savedData = JSON.parse(
       localStorage.getItem(key) || "{}"
   );

   renderDay(cell, day, savedData);

   cell.addEventListener("click", () => {

       const data = JSON.parse(
           localStorage.getItem(key) || "{}"
       );

       const was = prompt("Was:", data.was || "");
       if (was === null) return;

       const wann = prompt("Wann:", data.wann || "");
       if (wann === null) return;

       const zielgruppe = prompt(
           "Zielgruppe:",
           data.zielgruppe || ""
       );
       if (zielgruppe === null) return;

       const wo = prompt(
           "Wo:",
           data.wo || ""
       );
       if (wo === null) return;

       const anmeldung = prompt(
           "Anmeldung:",
           data.anmeldung || ""
       );
       if (anmeldung === null) return;

       const link = prompt(
           "Link:",
           data.link || ""
       );
       if (link === null) return;

       const newData = {
           was,
           wann,
           zielgruppe,
           wo,
           anmeldung,
           link
       };

       localStorage.setItem(
           key,
           JSON.stringify(newData)
       );

       renderDay(cell, day, newData);
   });

   calendar.appendChild(cell);

}

Abgerufen von „https://www.buendnis-fuer-familie-tuebingen.de/mediawiki/index.php?title=Familienangebote_im_August&oldid=8336“