Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<html lang="de">
<div id="familienangebote-august"></div>
<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;
    background:#f5f5f5;
}
 
h1{
    text-align:center;
}
 
.toolbar{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    justify-content:center;
}
 
button{
    cursor:pointer;
}
 
.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
}
 
.weekday{
    background:#003366;
    color:white;
    padding:10px;
    text-align:center;
    font-weight:bold;
}
 
.day{
    background:white;
    min-height:150px;
    border-radius:8px;
    padding:8px;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    cursor:pointer;
}
 
.day-number{
    font-weight:bold;
    margin-bottom:8px;
}
 
.entry{
    background:#e8f2ff;
    padding:4px;
    margin-bottom:4px;
    border-radius:4px;
    font-size:12px;
}
 
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    justify-content:center;
    align-items:center;
}
 
.modal-content{
    background:white;
    width:90%;
    max-width:900px;
    max-height:90vh;
    overflow:auto;
    padding:20px;
    border-radius:10px;
}
 
label{
    display:block;
    margin-top:10px;
    font-weight:bold;
}
 
input, textarea{
    width:100%;
    padding:8px;
    box-sizing:border-box;
}
 
.entry-card{
    border:1px solid #ccc;
    padding:10px;
    margin:10px 0;
    border-radius:6px;
}
 
.actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}
 
.close-btn{
    float:right;
}
 
.empty{
    background:transparent;
}
</style>
</head>
<body>
 
<h1>Familienangebote – August 2026</h1>
 
</div>
 
<div class="calendar" id="calendar"></div>
 
<div class="modal" id="modal">
    <div class="modal-content">
 
        <button class="close-btn" onclick="closeModal()">Schließen</button>
 
        <h2 id="modalDate"></h2>
 
        <button onclick="addEntry()">+ Neuer Eintrag</button>
 
        <div id="entriesContainer"></div>
 
    </div>
</div>


<script>
<script>
const data = {


let data = {
   "1": [
   "1": [
     {
     {
Zeile 397: Zeile 259:
};
};


let selectedDay = null;
const root = document.getElementById("familienangebote-august");


root.innerHTML = `
<style>
.fa-calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    font-family:Arial,sans-serif;
}


const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
.fa-weekday{
    background:#003366;
    color:#fff;
    padding:10px;
    text-align:center;
    font-weight:bold;
}


function saveData(){
.fa-day{
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    min-height:120px;
    padding:8px;
    box-shadow:0 2px 4px rgba(0,0,0,.08);
}


     renderCalendar();
.fa-number{
     font-weight:bold;
    margin-bottom:8px;
}


     console.log(
.fa-entry{
        "Daten wurden geändert. Für dauerhafte Änderungen muss der Quelltext aktualisiert werden."
    background:#e8f2ff;
     );
    padding:4px;
     margin-bottom:4px;
    border-radius:4px;
     font-size:12px;
}
}
function renderCalendar(){


    const cal = document.getElementById("calendar");
.fa-modal{
     cal.innerHTML = "";
     display:none;
 
     position:fixed;
     weekdays.forEach(day=>{
     inset:0;
        const div = document.createElement("div");
     background:rgba(0,0,0,.5);
        div.className = "weekday";
     justify-content:center;
        div.textContent = day;
     align-items:center;
        cal.appendChild(div);
     z-index:9999;
     });
 
     const firstDay = new Date(2026,7,1);
 
    let offset = firstDay.getDay();
     offset = offset === 0 ? 6 : offset - 1;
 
     for(let i=0;i<offset;i++){
        const empty = document.createElement("div");
        empty.className = "empty";
        cal.appendChild(empty);
     }
 
    for(let day=1; day<=31; day++){
 
        const div = document.createElement("div");
        div.className = "day";
 
        div.onclick = () => openDay(day);
 
        const dayNumber = document.createElement("div");
        dayNumber.className = "day-number";
        dayNumber.textContent = day;
 
        div.appendChild(dayNumber);
 
        const entries = data[day] || [];
 
        entries.forEach(entry=>{
            const e = document.createElement("div");
            e.className = "entry";
            e.textContent = entry.angebot || "(ohne Titel)";
            div.appendChild(e);
        });
 
        cal.appendChild(div);
    }
}
}


function openDay(day){
.fa-modal-content{
 
    background:#fff;
     selectedDay = day;
     width:90%;
 
    max-width:900px;
     document.getElementById("modal").style.display="flex";
     max-height:90vh;
     document.getElementById("modalDate").textContent =
     overflow:auto;
        `Samstag, ${day}. August 2026`.replace("Samstag", new Date(2026,7,day)
    padding:20px;
        .toLocaleDateString("de-DE",{weekday:"long"}));
     border-radius:8px;
 
     renderEntries();
}
}


function closeModal(){
.fa-close{
     document.getElementById("modal").style.display="none";
     float:right;
}
}
</style>


function renderEntries(){
<h2>Familienangebote August 2026</h2>


    const container = document.getElementById("entriesContainer");
<div class="fa-calendar" id="fa-calendar"></div>
    container.innerHTML = "";


    if(!data[selectedDay]){
<div class="fa-modal" id="fa-modal">
        data[selectedDay] = [];
  <div class="fa-modal-content">
    }
      <button class="fa-close" onclick="closeFaModal()">Schließen</button>
      <h3 id="fa-title"></h3>
      <div id="fa-content"></div>
  </div>
</div>
`;


    data[selectedDay].forEach((entry,index)=>{
const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
const calendar = document.getElementById("fa-calendar");


        const card = document.createElement("div");
weekdays.forEach(d=>{
        card.className = "entry-card";
    const el=document.createElement("div");
    el.className="fa-weekday";
    el.textContent=d;
    calendar.appendChild(el);
});


        card.innerHTML = `
const firstDay=new Date(2026,7,1);
            <label>Angebot</label>
let offset=firstDay.getDay();
            <input value="${entry.angebot || ''}" onchange="updateField(${index},'angebot',this.value)">
offset=offset===0?6:offset-1;


            <label>Uhrzeit</label>
for(let i=0;i<offset;i++){
            <input value="${entry.uhrzeit || ''}" onchange="updateField(${index},'uhrzeit',this.value)">
    const empty=document.createElement("div");
    calendar.appendChild(empty);
}


            <label>Treffpunkt/Ort</label>
for(let day=1;day<=31;day++){
            <input value="${entry.ort || ''}" onchange="updateField(${index},'ort',this.value)">


            <label>Zielgruppe</label>
    const cell=document.createElement("div");
            <input value="${entry.zielgruppe || ''}" onchange="updateField(${index},'zielgruppe',this.value)">
    cell.className="fa-day";


            <label>Anmeldung</label>
    const number=document.createElement("div");
            <input value="${entry.anmeldung || ''}" onchange="updateField(${index},'anmeldung',this.value)">
    number.className="fa-number";
    number.textContent=day;


            <label>Link zum Angebot</label>
    cell.appendChild(number);
            <input value="${entry.link || ''}" onchange="updateField(${index},'link',this.value)">


            <label>Beschreibung</label>
    const entries=data[day]||[];
            <textarea rows="4" onchange="updateField(${index},'beschreibung',this.value)">${entry.beschreibung || ''}</textarea>


          <div class="actions">
    entries.forEach(entry=>{
    <button onclick="copyEntryToDate(${index})">
        const div=document.createElement("div");
         Auf anderes Datum kopieren
        div.className="fa-entry";
     </button>
        div.textContent=entry.angebot;
         cell.appendChild(div);
     });


     <button onclick="deleteEntry(${index})">
     cell.onclick=()=>showDay(day);
        Löschen
    </button>
</div>
        `;


        container.appendChild(card);
    calendar.appendChild(cell);
    });
}
}
function copyEntryToDate(index){


    const targetDay = prompt(
function showDay(day){
        "Auf welchen Tag im August kopieren? (1-31)"
    );


     if(!targetDay) return;
     const entries=data[day]||[];


     const day = parseInt(targetDay);
     document.getElementById("fa-title").textContent=
        day + ". August 2026";


     if(day < 1 || day > 31){
     let html="";
        alert("Ungültiger Tag.");
        return;
    }


     if(!data[day]){
     entries.forEach(entry=>{
        data[day] = [];
    }


    const copy = JSON.parse(
        html+=`
         JSON.stringify(data[selectedDay][index])
         <div style="border:1px solid #ddd;padding:10px;margin-bottom:10px;border-radius:6px;">
    );
            <h4>${entry.angebot||""}</h4>


    data[day].push(copy);
            <p><b>Uhrzeit:</b> ${entry.uhrzeit||""}</p>
            <p><b>Ort:</b> ${entry.ort||""}</p>
            <p><b>Zielgruppe:</b> ${entry.zielgruppe||""}</p>
            <p><b>Anmeldung:</b> ${entry.anmeldung||""}</p>


    saveData();
             ${
 
                 entry.link
    alert(
                 ? `<p><a href="${entry.link}" target="_blank">Weitere Informationen</a></p>`
        "Termin wurde auf den "
                 : ""
        + day +
        ". August kopiert."
    );
 
    saveData();
    renderEntries();
 
 
async function exportPDF(){
 
    const { jsPDF } = window.jspdf;
 
    const pdf = new jsPDF();
 
    let y = 15;
 
    pdf.setFontSize(18);
    pdf.text(
        "Familienangebote August 2026",
        10,
        y
    );
 
    y += 10;
 
    for(let day=1; day<=31; day++){
 
        const entries = data[day] || [];
 
        if(entries.length === 0) continue;
 
        if(y > 260){
            pdf.addPage();
             y = 15;
        }
 
        pdf.setFontSize(14);
        pdf.text(`${day}. August 2026`,10,y);
 
        y += 8;
 
        entries.forEach(entry=>{
 
            const text = [
                 `Angebot: ${entry.angebot || ''}`,
                 `Uhrzeit: ${entry.uhrzeit || ''}`,
                `Ort: ${entry.ort || ''}`,
                `Zielgruppe: ${entry.zielgruppe || ''}`,
                `Anmeldung: ${entry.anmeldung || ''}`,
                `Link: ${entry.link || ''}`,
                 `Beschreibung: ${entry.beschreibung || ''}`
            ];
 
            const lines =
                pdf.splitTextToSize(
                    text.join("\n"),
                    180
                );
 
            pdf.setFontSize(10);
            pdf.text(lines,10,y);
 
            y += lines.length * 5 + 5;
 
            if(y > 260){
                pdf.addPage();
                y = 15;
             }
             }
        });
    }


    pdf.save(
            <p>${entry.beschreibung||""}</p>
         "Familienangebote_August_2026.pdf"
         </div>
    );
        `;
}
    });
function exportExcel(){


     const rows = [];
     if(entries.length===0){
 
         html="<p>Keine Einträge vorhanden.</p>";
    for(let day=1; day<=31; day++){
 
         const entries = data[day] || [];
 
        entries.forEach(entry=>{
 
            rows.push({
 
                Datum:
                    `${day}.08.2026`,
 
                Angebot:
                    entry.angebot || "",
 
                Uhrzeit:
                    entry.uhrzeit || "",
 
                Ort:
                    entry.ort || "",
 
                Zielgruppe:
                    entry.zielgruppe || "",
 
                Anmeldung:
                    entry.anmeldung || "",
 
                Link:
                    entry.link || "",
 
                Beschreibung:
                    entry.beschreibung || ""
            });
 
        });
     }
     }


     const ws =
     document.getElementById("fa-content").innerHTML=html;
        XLSX.utils.json_to_sheet(rows);
     document.getElementById("fa-modal").style.display="flex";
 
    const wb =
        XLSX.utils.book_new();
 
     XLSX.utils.book_append_sheet(
        wb,
        ws,
        "Familienangebote"
    );
 
    XLSX.writeFile(
        wb,
        "Familienangebote_August_2026.xlsx"
    );
}
}
function importData(event){
    const file = event.target.files[0];
    if(!file) return;
    const reader = new FileReader();
    reader.onload = e => {
        data = JSON.parse(e.target.result);
        saveData();
        alert("Import erfolgreich.");
    };


     reader.readAsText(file);
function closeFaModal(){
     document.getElementById("fa-modal").style.display="none";
}
}
renderCalendar();
</script>
</script>
</body>
</html>

Version vom 10. Juni 2026, 09:32 Uhr

<script> const data = { 

 "1": [
   {
     angebot: "Bächlewanderung mit Kind und Kescher",
     uhrzeit: "10:00 - 13:00",
     ort: "Start und Treffpunkt ist am Parkplatz Bebenhausen.",
     zielgruppe: "Geeignet für Familien mit Kindern ab 5 Jahren",
     anmeldung: "wird benötigt",
     link: "https://www.fbs-tuebingen.de/eltern-und-kinder/kw/bereich/kursdetails/kurs/261-2516B/kursname/Baechlewanderung%20mit%20Kind%20und%20Kescher/kategorie-id/11/",
     beschreibung: "Wir wandern am Goldersbach entlang über die Tellerbrücke zur Teufelsbrücke."
   }
 ],

 "2": [
   {
     angebot: "Eiscafé frieDa",
     uhrzeit: "14:00-17:00",
     ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
     zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
     anmeldung: "",
     link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
     beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
   },
   {
     angebot: "Geschwisterchen auf dem Weg",
     uhrzeit: "10:00 - 12:00",
     ort: "FBS, Raum 003 Villa Metz, Hechingerstraße 13",
     zielgruppe: "Für Kinder ab 4 Jahren mit einem Elternteil",
     anmeldung: "wird benötigt",
     link: "https://www.fbs-tuebingen.de/programm/kw/bereich/kursdetails/kurs/261-2509/kursname/Geschwisterchen%20auf%20dem%20Weg/",
     beschreibung: "Vorbereitung auf ein Geschwisterchen."
   }
 ],

 "4": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   }
 ],

 "5": [
   {
     angebot: "Spielplatztreff",
     uhrzeit: "14:30-15:30",
     ort: "Piratenspielplatz, Anlagenpark",
     zielgruppe: "Familien mit jüngeren Kindern",
     anmeldung: "-",
     link: "",
     beschreibung: "Treffpunkt zum Austausch mit der Familienbeauftragten."
   }
 ],

 "6": [
   {
  angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: 
   },
   {
     angebot: "Sommerferien mit dem LESE-HAUS",
     uhrzeit: "11:00"

ort: Alter Botanischer Garten, Wiese neben dem Kinderspielplatz, bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", zielgruppe: "Kinder von 4 - 8 Jahre mit Begleitpersonen", link: "https://tuebingen.ferienprogramm-online.de/" beschreibung: ""Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit allerlei Geschichten, vorgelesen von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung immer donnerstags im Alten Botanischen Garten an einem schattigen Plätzchen statt. Bei schlechtem Wetter treffen wir uns im Thekla-Waitz-Studio im Erdgeschoss der Stadtbücherei." 



   }
 ],

 "9": [
   {
      angebot: "Eiscafé frieDa",
     uhrzeit: "14:00-17:00",
     ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
     zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
     anmeldung: "",
     link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
     beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
   }
 ],

 "11": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   }
 ],

 "12": [
   {
     angebot: "Spielplatztreff",
     uhrzeit: "14:30-15:30"
   }
 ],

 "13": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   },
   {
     angebot: "Sommerferien mit dem LESE-HAUS",
     uhrzeit: "11:00"

ort: Alter Botanischer Garten, Wiese neben dem Kinderspielplatz, bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", zielgruppe: "Kinder von 4 - 8 Jahre mit Begleitpersonen", link: "https://tuebingen.ferienprogramm-online.de/" beschreibung: ""Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit allerlei Geschichten, vorgelesen von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung immer donnerstags im Alten Botanischen Garten an einem schattigen Plätzchen statt. Bei schlechtem Wetter treffen wir uns im Thekla-Waitz-Studio im Erdgeschoss der Stadtbücherei." 

   }
 ],

 "16": [
   {
angebot: "Eiscafé frieDa",
     uhrzeit: "14:00-17:00",
     ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
     zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
     anmeldung: "",
     link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
     beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
   },
   {
     angebot: "Bunt backen mit Kindern: Regenbogen-Muffins & Cake-Pops",
     uhrzeit: "16:00 - 18:30"
   }
 ],

 "18": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   }
 ],

 "19": [
   {
     angebot: "Spielplatztreff",
     uhrzeit: "14:30-15:30"
   }
 ],

 "20": [
   {
    angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   },
   {
     angebot: "Sommerferien mit dem LESE-HAUS",
     uhrzeit: "11:00"

ort: Alter Botanischer Garten, Wiese neben dem Kinderspielplatz, bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", zielgruppe: "Kinder von 4 - 8 Jahre mit Begleitpersonen", link: "https://tuebingen.ferienprogramm-online.de/" beschreibung: ""Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit allerlei Geschichten, vorgelesen von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung immer donnerstags im Alten Botanischen Garten an einem schattigen Plätzchen statt. Bei schlechtem Wetter treffen wir uns im Thekla-Waitz-Studio im Erdgeschoss der Stadtbücherei." 

   }
 ],

 "23": [
   {
angebot: "Eiscafé frieDa",
     uhrzeit: "14:00-17:00",
     ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
     zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
     anmeldung: "",
     link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
     beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
   }
 ],

 "25": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   }
 ],

 "26": [
   {
     angebot: "Spielplatztreff",
     uhrzeit: "14:30-15:30"
   }
 ],

 "27": [
   {
     angebot: "BabyBrunch",
     uhrzeit: "09:30-11:30",
     ort: "elkiko Familienzentrum",
     zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
     anmeldung: "babybrunch@elkiko.de",
     link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
     beschreibung: ""
   },
   {
     angebot: "Sommerferien mit dem LESE-HAUS",
     uhrzeit: "11:00"

ort: Alter Botanischer Garten, Wiese neben dem Kinderspielplatz, bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", zielgruppe: "Kinder von 4 - 8 Jahre mit Begleitpersonen", link: "https://tuebingen.ferienprogramm-online.de/" beschreibung: ""Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit allerlei Geschichten, vorgelesen von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung immer donnerstags im Alten Botanischen Garten an einem schattigen Plätzchen statt. Bei schlechtem Wetter treffen wir uns im Thekla-Waitz-Studio im Erdgeschoss der Stadtbücherei." 

   }
 ],

 "30": [
   {
      angebot: "Eiscafé frieDa",
     uhrzeit: "14:00-17:00",
     ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
     zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
     anmeldung: "",
     link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
     beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
   }
 ]

};

const root = document.getElementById("familienangebote-august");

root.innerHTML = ` <style> .fa-calendar{ 

   display:grid;
   grid-template-columns:repeat(7,1fr);
   gap:10px;
   font-family:Arial,sans-serif;

}

.fa-weekday{ 

   background:#003366;
   color:#fff;
   padding:10px;
   text-align:center;
   font-weight:bold;

}

.fa-day{ 

   background:#fff;
   border:1px solid #ddd;
   border-radius:6px;
   min-height:120px;
   padding:8px;
   box-shadow:0 2px 4px rgba(0,0,0,.08);

}

.fa-number{ 

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

}

.fa-entry{ 

   background:#e8f2ff;
   padding:4px;
   margin-bottom:4px;
   border-radius:4px;
   font-size:12px;

}

.fa-modal{ 

   display:none;
   position:fixed;
   inset:0;
   background:rgba(0,0,0,.5);
   justify-content:center;
   align-items:center;
   z-index:9999;

}

.fa-modal-content{ 

   background:#fff;
   width:90%;
   max-width:900px;
   max-height:90vh;
   overflow:auto;
   padding:20px;
   border-radius:8px;

}

.fa-close{ 

   float:right;

} </style>

Familienangebote August 2026

     <button class="fa-close" onclick="closeFaModal()">Schließen</button>

`;

const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"]; const calendar = document.getElementById("fa-calendar");

weekdays.forEach(d=>{ 

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

});

const firstDay=new Date(2026,7,1); let offset=firstDay.getDay(); offset=offset===0?6:offset-1;

for(let i=0;i<offset;i++){ 

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

}

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

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

   const number=document.createElement("div");
   number.className="fa-number";
   number.textContent=day;

   cell.appendChild(number);

   const entries=data[day]||[];

   entries.forEach(entry=>{
       const div=document.createElement("div");
       div.className="fa-entry";
       div.textContent=entry.angebot;
       cell.appendChild(div);
   });

   cell.onclick=()=>showDay(day);

   calendar.appendChild(cell);

}

function showDay(day){ 

   const entries=data[day]||[];

   document.getElementById("fa-title").textContent=
       day + ". August 2026";

   let html="";

   entries.forEach(entry=>{

       html+=`

${entry.angebot||""}

Uhrzeit: ${entry.uhrzeit||""}

Ort: ${entry.ort||""}

Zielgruppe: ${entry.zielgruppe||""}

Anmeldung: ${entry.anmeldung||""}

           ${
               entry.link
 ? `

<a href="${entry.link}" target="_blank">Weitere Informationen</a>

` 
               : ""
           }

${entry.beschreibung||""}

       `;
   });

   if(entries.length===0){

html="

Keine Einträge vorhanden.

"; 

   }

   document.getElementById("fa-content").innerHTML=html;
   document.getElementById("fa-modal").style.display="flex";

}

function closeFaModal(){ 

   document.getElementById("fa-modal").style.display="none";

} </script>

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