Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
<noinclude> Kalender Familienangebote August 2026 </noinclude> <div class="familienkalender"> <style> .familienkalender { font-family: Arial, sans-serif; } .familienkalender-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .familienkalender-kopf { background:#e9ecef; padding:10px; font-weight:bold; text-align:center; border:1px solid #ccc; } .familienkalender-tag { border:1px solid #ccc; min-height:220px; padding:8px; background:#fff; } .familienkalender-tag h4 { margin:0 0 8px 0; padding-bottom:5px; border-bottom:1px solid #ddd; } .feld { margin-bottom:6px; font-size:12px; } .feld b { display:block; } </style> <div class="familienkalender-grid"> <div class="familienkalender-kopf">Mo</div> <div class="familienkalender-kopf">Di</div> <div class="familienkalender-kopf">Mi</div> <div class="familienkalender-kopf">Do</div> <div class="familienkalender-kopf">Fr</div> <div class="familienkalender-kopf">Sa</div> <div class="familienkalender-kopf">So</div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="familienkalender-tag"> <h4>1</h4> <div class="feld"><b>Was:</b></div> <div class="feld"><b>Wann:</b></div> <div class="feld"><b>Zielgruppe:</b></div> <div class="feld"><b>Wo:</b></div> <div class="feld"><b>Anmeldung:</b></div> <div class="feld"><b>Link:</b></div> </div> <div class="familienkalender-tag"> <h4>2</h4> <div class="feld"><b>Was:</b></div> <div class="feld"><b>Wann:</b></div> <div class="feld"><b>Zielgruppe:</b></div> <div class="feld"><b>Wo:</b></div> <div class="feld"><b>Anmeldung:</b></div> <div class="feld"><b>Link:</b></div> </div> <!-- Tage 3 bis 31 nach gleichem Muster --> </div> </div>
```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
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);
}
```

Version vom 9. Juni 2026, 09:05 Uhr

```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);

} ```