Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
```javascript
<!DOCTYPE html>
const modal = document.getElementById("eventModal");
<html lang="de">
const closeBtn = document.querySelector(".close");
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Familienangebote August 2026</title>


let currentDay = null;
<style>
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f5f5f5;
}


function getEvents(day){
h1 {
     return JSON.parse(
     text-align: center;
        localStorage.getItem("august2026_" + day) || "[]"
    );
}
}


function saveEvents(day, events){
.calendar {
     localStorage.setItem(
     display: grid;
        "august2026_" + day,
    grid-template-columns: repeat(7, 1fr);
        JSON.stringify(events)
     gap: 10px;
     );
}
}


function renderDayPreview(cell, day){
.day-header {
    background: #2d6cdf;
    color: white;
    text-align: center;
    padding: 10px;
    font-weight: bold;
}


     const events = getEvents(day);
.day {
    background: white;
    min-height: 180px;
    border-radius: 8px;
     padding: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}


    cell.innerHTML = `
.date {
        <div class="day-number">${day}</div>
    font-weight: bold;
        <div class="note">
    margin-bottom: 8px;
            ${events.length} Termin(e)
     color: #2d6cdf;
        </div>
     `;
}
}


function openDay(day){
.event {
    border-left: 4px solid #2d6cdf;
    padding-left: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}


     currentDay = day;
.event strong {
     display: inline-block;
    width: 85px;
}
</style>
</head>
<body>


    document.getElementById("modalDate").innerText =
<h1>Familienangebote August 2026</h1>
        day + ". August 2026";


    const events = getEvents(day);
<div class="calendar" id="calendar"></div>


    const list = document.getElementById("eventList");
<script>
const events = {
    3: [
        {
            angebot: "Baby-Café",
            uhrzeit: "09:00 - 11:00",
            zielgruppe: "Eltern mit Babys",
            anmeldung: "Nein",
            link: "https://beispiel.de"
        },
        {
            angebot: "Familientreff",
            uhrzeit: "15:00 - 17:00",
            zielgruppe: "Familien",
            anmeldung: "Ja",
            link: "https://beispiel.de"
        }
    ],


     list.innerHTML = "";
     12: [
 
        {
    events.forEach((event,index)=>{
            angebot: "Spielplatzaktion",
 
            uhrzeit: "14:00 - 17:00",
        list.innerHTML += `
             zielgruppe: "Kinder 4-10 Jahre",
             <div class="event-item">
            anmeldung: "Nein",
 
            link: "https://beispiel.de"
                <h4>${event.was}</h4>
        }
 
    ]
                <strong>Wann:</strong>
};
                ${event.wann}<br>
 
                <strong>Zielgruppe:</strong>
                ${event.zielgruppe}<br>
 
                <strong>Wo:</strong>
                ${event.wo}<br>
 
                <strong>Anmeldung:</strong>
                ${event.anmeldung}<br>


                <strong>Link:</strong>
const calendar = document.getElementById("calendar");
                <a href="${event.link}" target="_blank">
                    öffnen
                </a><br>


                <strong>Beschreibung:</strong><br>
const weekdays = [
                ${event.beschreibung}<br><br>
    "Montag",
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
    "Sonntag"
];


                <button onclick="deleteEvent(${index})">
weekdays.forEach(day => {
                    Löschen
    const header = document.createElement("div");
                </button>
    header.className = "day-header";
    header.textContent = day;
    calendar.appendChild(header);
});


            </div>
// August 2026 beginnt an einem Samstag
        `;
const firstDayOffset = 5;
    });


     modal.style.display = "block";
// Leere Felder vor dem 1. August
for (let i = 0; i < firstDayOffset; i++) {
     const empty = document.createElement("div");
    calendar.appendChild(empty);
}
}


function saveEvent(){
for (let day = 1; day <= 31; day++) {
    const dayBox = document.createElement("div");
    dayBox.className = "day";


     const events = getEvents(currentDay);
     let html = `<div class="date">${day}. August</div>`;


     events.push({
     if (events[day]) {
         was: document.getElementById("was").value,
         events[day].forEach(event => {
        wann: document.getElementById("wann").value,
            html += `
        zielgruppe: document.getElementById("zielgruppe").value,
                <div class="event">
        wo: document.getElementById("wo").value,
                    <div><strong>Angebot:</strong> ${event.angebot}</div>
        anmeldung: document.getElementById("anmeldung").value,
                    <div><strong>Uhrzeit:</strong> ${event.uhrzeit}</div>
        link: document.getElementById("link").value,
                    <div><strong>Zielgruppe:</strong> ${event.zielgruppe}</div>
        beschreibung:
                    <div><strong>Anmeldung:</strong> ${event.anmeldung}</div>
            document.getElementById("beschreibung").value
                    <div><strong>Link:</strong>
    });
                        <a href="${event.link}" target="_blank">Öffnen</a>
 
                    </div>
    saveEvents(currentDay, events);
                </div>
 
            `;
    openDay(currentDay);
        });
 
     }
    document.getElementById("was").value = "";
    document.getElementById("wann").value = "";
    document.getElementById("zielgruppe").value = "";
    document.getElementById("wo").value = "";
    document.getElementById("anmeldung").value = "";
    document.getElementById("link").value = "";
     document.getElementById("beschreibung").value = "";


     document.querySelectorAll(".day").forEach((cell,index)=>{
     dayBox.innerHTML = html;
        if(index + 1 === currentDay){
     calendar.appendChild(dayBox);
            renderDayPreview(cell,currentDay);
        }
     });
}
}
</script>


function deleteEvent(index){
</body>
 
</html>
    const events = getEvents(currentDay);
 
    events.splice(index,1);
 
    saveEvents(currentDay,events);
 
    openDay(currentDay);
}
 
closeBtn.onclick = () => {
    modal.style.display = "none";
};
 
window.onclick = (e) => {
    if(e.target === modal){
        modal.style.display = "none";
    }
};
```

Version vom 9. Juni 2026, 09:34 Uhr

<!DOCTYPE html> Familienangebote August 2026

Familienangebote August 2026

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