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:
cell.addEventListener("click", () => {
```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Familienangebote August 2026</title>


     const data = JSON.parse(localStorage.getItem(key) || "{}");
<style>
body {
    font-family: Arial, sans-serif;
     margin: 20px;
}


     const was = prompt("Was?", data.was || "");
h2 {
    if (was === null) return;
     text-align: center;
}


     const wann = prompt("Wann?", data.wann || "");
.calendar {
     if (wann === null) return;
     display: grid;
    grid-template-columns: repeat(7, 1fr);
     gap: 8px;
}


     const zielgruppe = prompt("Zielgruppe?", data.zielgruppe || "");
.weekday {
     if (zielgruppe === null) return;
     font-weight: bold;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
     border: 1px solid #ddd;
}


     const wo = prompt("Wo?", data.wo || "");
.day {
     if (wo === null) return;
    border: 1px solid #ccc;
    min-height: 220px;
    padding: 8px;
    background: #fff;
     cursor: pointer;
     overflow-wrap: break-word;
}


    const anmeldung = prompt("Anmeldung?", data.anmeldung || "");
.day:hover {
     if (anmeldung === null) return;
     background: #f9f9f9;
}


     const link = prompt("Link?", data.link || "");
.day-number {
     if (link === null) return;
     font-weight: bold;
    font-size: 16px;
     margin-bottom: 8px;
}


    const newData = {
.note {
        was,
    font-size: 12px;
        wann,
    line-height: 1.4;
        zielgruppe,
}
        wo,
        anmeldung,
        link
    };


     localStorage.setItem(key, JSON.stringify(newData));
.note strong {
     display: block;
    margin-top: 4px;
}
</style>
</head>


     renderDay(cell, day, newData);
<body>
 
<h2>Familienangebote – August 2026</h2>
 
<p>
Klicke auf einen Tag, um die Informationen zu bearbeiten.
</p>
 
<div class="calendar" id="calendar"></div>
 
<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);
}
function renderDay(cell, day, data) {
    cell.innerHTML = `
        <div class="day-number">${day}</div>
        <div class="note">
            <strong>Was:</strong>
            ${data.was || "-"}
            <strong>Wann:</strong>
            ${data.wann || "-"}
            <strong>Zielgruppe:</strong>
            ${data.zielgruppe || "-"}
            <strong>Wo:</strong>
            ${data.wo || "-"}
            <strong>Anmeldung:</strong>
            ${data.anmeldung || "-"}
            <strong>Link:</strong>
            ${
                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);
}
</script>
</body>
</html>
```

Version vom 9. Juni 2026, 08:59 Uhr

```html <!DOCTYPE html> Familienangebote August 2026

Familienangebote – August 2026

Klicke auf einen Tag, um die Informationen zu bearbeiten.

```

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