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:
```html
<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>
<!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>
 
<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;
    border: 1px solid #ddd;
}
 
.day {
    border: 1px solid #ccc;
    min-height: 220px;
    padding: 8px;
    background: #fff;
    cursor: pointer;
    overflow-wrap: break-word;
}
 
.day:hover {
    background: #f9f9f9;
}
 
.day-number {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}
 
.note {
    font-size: 12px;
    line-height: 1.4;
}
 
.note strong {
    display: block;
    margin-top: 4px;
}
</style>
</head>
 
<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, 09:04 Uhr

Kalender Familienangebote August 2026

<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>
Mo
Di
Mi
Do
Fr
Sa
So

1

Was:
Wann:
Zielgruppe:
Wo:
Anmeldung:
Link:

2

Was:
Wann:
Zielgruppe:
Wo:
Anmeldung:
Link:
Abgerufen von „https://www.buendnis-fuer-familie-tuebingen.de/mediawiki/index.php?title=Familienangebote_im_August&oldid=8332“