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:
<h2>Familienangebote im August 2026</h2>
<html lang="de">
<p>Hier finden Sie Familienangebote im August 2026 in Tübingen. Im Kalender stehen jeweils Uhrzeit und Titel, darunter folgen die vollständigen Details zu allen Terminen.</p>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Familienangebote im August 2026</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #f7f6f2;
      --surface: #ffffff;
      --surface-2: #f3f0ec;
      --text: #28251d;
      --muted: #6f6a63;
      --border: rgba(40, 37, 29, 0.12);
      --primary: #01696f;
      --primary-soft: #dcebea;
      --shadow: 0 10px 28px rgba(36, 31, 24, 0.08);
      --radius: 18px;
      --radius-sm: 12px;
    }


<table style="width:100%; border-collapse:collapse; table-layout:fixed; margin-bottom:24px; font-family:Arial, Helvetica, sans-serif; font-size:14px;">
    * { box-sizing: border-box; }
  <thead>
    html { scroll-behavior: smooth; }
     <tr>
    body {
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Mo</th>
      margin: 0;
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Di</th>
      font-family: 'Inter', system-ui, sans-serif;
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Mi</th>
      background: var(--bg);
      <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Do</th>
      color: var(--text);
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Fr</th>
      line-height: 1.5;
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">Sa</th>
    }
       <th style="border:1px solid #cccccc; padding:8px; background:#f3f3f3;">So</th>
 
    </tr>
     .calendar-app {
  </thead>
       max-width: 1180px;
  <tbody>
      margin: 0 auto;
    <tr>
      padding: 24px 16px 40px;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
    }
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
 
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
    .calendar-head {
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
       display: flex;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
      justify-content: space-between;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>1</strong><br>10:00 - 13:00<br>B&auml;chlewanderung mit Kind und Kescher</td>
      align-items: end;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>2</strong><br>10:00 - 12:00<br>Geschwisterchen auf dem Weg<br><br>14:00 - 17:00<br>Eiscaf&eacute; frieDa</td>
       gap: 16px;
     </tr>
      margin-bottom: 18px;
     <tr>
      flex-wrap: wrap;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>3</strong></td>
    }
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>4</strong><br>09:30 - 11:30<br>BabyBrunch</td>
 
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>5</strong><br>14:30 - 15:30<br>Spielplatztreff</td>
    .calendar-title-wrap h1 {
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>6</strong><br>09:30 - 11:30<br>BabyBrunch<br><br>11:00<br>Sommerferien mit dem LESE-HAUS</td>
      margin: 0;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>7</strong></td>
      font-size: clamp(1.7rem, 2.8vw, 2.5rem);
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>8</strong></td>
      line-height: 1.1;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>9</strong><br>14:00 - 17:00<br>Eiscaf&eacute; frieDa</td>
    }
    </tr>
 
     <tr>
    .calendar-title-wrap p {
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>10</strong></td>
       margin: 8px 0 0;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>11</strong><br>09:30 - 11:30<br>BabyBrunch</td>
      color: var(--muted);
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>12</strong><br>14:30 - 15:30<br>Spielplatztreff</td>
       max-width: 70ch;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>13</strong><br>09:30 - 11:30<br>BabyBrunch<br><br>11:00<br>Sommerferien mit dem LESE-HAUS</td>
      font-size: 0.98rem;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>14</strong></td>
    }
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>15</strong></td>
 
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>16</strong><br>14:00 - 17:00<br>Eiscaf&eacute; frieDa<br><br>16:00 - 18:30<br>Bunt backen mit Kindern</td>
    .badge {
     </tr>
      display: inline-flex;
     <tr>
       align-items: center;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>17</strong></td>
      gap: 8px;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>18</strong><br>09:30 - 11:30<br>BabyBrunch</td>
      background: var(--primary-soft);
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>19</strong><br>14:30 - 15:30<br>Spielplatztreff</td>
      color: var(--primary);
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>20</strong><br>09:30 - 11:30<br>BabyBrunch<br><br>11:00<br>Sommerferien mit dem LESE-HAUS</td>
      border-radius: 999px;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>21</strong></td>
      padding: 10px 14px;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>22</strong></td>
       font-size: 0.92rem;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>23</strong><br>14:00 - 17:00<br>Eiscaf&eacute; frieDa</td>
      font-weight: 600;
    </tr>
      white-space: nowrap;
    <tr>
    }
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>24</strong></td>
 
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>25</strong><br>09:30 - 11:30<br>BabyBrunch</td>
    .weekday-row,
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>26</strong><br>14:30 - 15:30<br>Spielplatztreff</td>
    .calendar-grid {
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>27</strong><br>09:30 - 11:30<br>BabyBrunch<br><br>11:00<br>Sommerferien mit dem LESE-HAUS</td>
      display: grid;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>28</strong></td>
       grid-template-columns: repeat(7, minmax(0, 1fr));
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>29</strong></td>
      gap: 10px;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>30</strong><br>14:00 - 17:00<br>Eiscaf&eacute; frieDa</td>
    }
    </tr>
 
    <tr>
    .weekday {
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"><strong>31</strong></td>
       text-align: center;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
      padding: 12px 8px;
       <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
      color: var(--muted);
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
       font-weight: 700;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
      font-size: 0.92rem;
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
    }
      <td style="border:1px solid #cccccc; vertical-align:top; padding:8px; height:120px;"></td>
 
    </tr>
    .day-card {
  </tbody>
      min-height: 146px;
</table>
      background: var(--surface);
       border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: var(--shadow);
       display: flex;
      flex-direction: column;
      gap: 10px;
    }
 
    .day-card.empty {
      background: transparent;
      border-style: dashed;
       box-shadow: none;
      min-height: 146px;
    }
 
    .day-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
     }
 
     .day-number {
       font-weight: 700;
      font-size: 0.98rem;
      color: var(--muted);
    }
 
    .event-count {
      font-size: 0.78rem;
      color: var(--primary);
       background: var(--primary-soft);
      padding: 4px 8px;
      border-radius: 999px;
       font-weight: 600;
    }
 
    .events-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
 
    .event-chip {
      width: 100%;
      text-align: left;
       border: 1px solid transparent;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      padding: 10px 11px;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
 
    .event-chip:hover,
    .event-chip:focus-visible {
       transform: translateY(-1px);
      border-color: rgba(1, 105, 111, 0.3);
      box-shadow: 0 8px 18px rgba(1, 105, 111, 0.10);
      background: #eef6f5;
       outline: none;
    }
 
    .event-time {
      display: block;
      color: var(--primary);
      font-weight: 700;
      font-size: 0.82rem;
       margin-bottom: 3px;
    }
 
    .event-title {
      display: block;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
    }
 
     dialog {
       width: min(94vw, 620px);
      border: none;
      padding: 0;
      border-radius: 22px;
      overflow: hidden;
       box-shadow: 0 24px 60px rgba(0,0,0,.25);
    }
 
    dialog::backdrop {
      background: rgba(20, 24, 34, 0.55);
      backdrop-filter: blur(3px);
    }
 
    .modal-content {
      background: var(--surface);
       padding: 22px;
    }
 
    .modal-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
       margin-bottom: 18px;
    }
 
    .modal-header h2 {
      margin: 0;
      font-size: 1.4rem;
      line-height: 1.2;
    }
 
    .modal-close {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid var(--border);
       background: var(--surface-2);
      font-size: 1.2rem;
      cursor: pointer;
      flex: 0 0 auto;
    }
 
    .detail-grid {
       display: grid;
      grid-template-columns: 140px 1fr;
      gap: 12px 14px;
       margin-bottom: 22px;
    }
 
    .detail-label {
      font-weight: 700;
      color: var(--muted);
    }
 
    .detail-value {
      min-width: 0;
     }
 
     .modal-actions {
       display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
 
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
       min-height: 44px;
      padding: 10px 16px;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 600;
       border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface);
    }
 
    .btn-primary {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
 
    .muted-empty {
      color: var(--muted);
       font-style: italic;
    }
 
    @media (max-width: 780px) {
      .weekday-row { display: none; }
      .calendar-grid { grid-template-columns: 1fr; }
      .day-card.empty { display: none; }
      .day-card {
        min-height: auto;
        padding: 14px;
      }
      .day-top {
        align-items: start;
      }
      .day-number {
        font-size: 1rem;
      }
      .detail-grid {
        grid-template-columns: 1fr;
        gap: 6px 0;
      }
    }
  </style>
</head>
<body>
  <section class="calendar-app" aria-labelledby="calendar-heading">
    <div class="calendar-head">
      <div class="calendar-title-wrap">
        <h1 id="calendar-heading">Familienangebote im August 2026</h1>
        <p>In der Übersicht erscheinen nur Uhrzeit und Titel. Beim Klick öffnet sich ein Popup mit allen Details, Hinweisen zur Anmeldung und dem Link zu weiteren Informationen.</p>
       </div>
      <div class="badge">August 2026 · mobile optimiert</div>
    </div>
 
    <div class="weekday-row" aria-hidden="true">
      <div class="weekday">Mo</div>
      <div class="weekday">Di</div>
      <div class="weekday">Mi</div>
       <div class="weekday">Do</div>
      <div class="weekday">Fr</div>
       <div class="weekday">Sa</div>
      <div class="weekday">So</div>
    </div>
 
    <div class="calendar-grid" id="calendarGrid"></div>
  </section>
 
  <dialog id="eventDialog" aria-labelledby="dialogTitle">
    <div class="modal-content">
      <div class="modal-header">
        <h2 id="dialogTitle"></h2>
        <button class="modal-close" type="button" id="closeDialog" aria-label="Popup schließen">✕</button>
      </div>
 
      <div class="detail-grid">
        <div class="detail-label">Datum</div>
        <div class="detail-value" id="dialogDate"></div>
 
        <div class="detail-label">Uhrzeit</div>
        <div class="detail-value" id="dialogTime"></div>
 
        <div class="detail-label">Ort</div>
        <div class="detail-value" id="dialogLocation"></div>
 
        <div class="detail-label">Zielgruppe</div>
        <div class="detail-value" id="dialogAudience"></div>
 
        <div class="detail-label">Anmeldung</div>
        <div class="detail-value" id="dialogRegistration"></div>
 
        <div class="detail-label">Zusatztext</div>
        <div class="detail-value" id="dialogDescription"></div>
      </div>
 
       <div class="modal-actions">
        <button class="btn" type="button" id="dialogCloseBottom">Schließen</button>
        <a class="btn btn-primary" id="dialogLink" href="#" target="_blank" rel="noopener noreferrer">Mehr Infos</a>
       </div>
    </div>
  </dialog>
 
  <script>
    const events = [
      {
        date: "2026-08-01",
        title: "Bächlewanderung mit Kind und Kescher",
        time: "10:00 - 13:00",
        location: "Start und Treffpunkt ist am Parkplatz Bebenhausen.",
        audience: "Geeignet für Familien mit Kindern ab 5 Jahren",
        registration: "wird benötigt",
        url: "https://www.fbs-tuebingen.de/eltern-und-kinder/kw/bereich/kursdetails/kurs/261-2516B/kursname/Baechlewanderung%20mit%20Kind%20und%20Kescher/kategorie-id/11/",
        description: "Wir wandern am Goldersbach entlang über die Tellerbrücke zur Teufelsbrücke."
      },
      {
        date: "2026-08-02",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-02",
        title: "Geschwisterchen auf dem Weg",
        time: "10:00 - 12:00",
        location: "FBS, Raum 003 Villa Metz, Hechingerstraße 13",
        audience: "Für Kinder ab 4 Jahren mit einem Elternteil",
        registration: "wird benötigt",
        url: "https://www.fbs-tuebingen.de/programm/kw/bereich/kursdetails/kurs/261-2509/kursname/Geschwisterchen%20auf%20dem%20Weg/",
        description: "Vorbereitung auf ein Geschwisterchen."
      },
      {
        date: "2026-08-04",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-05",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Piratenspielplatz, Anlagenpark",
        audience: "Familien mit jüngeren Kindern",
        registration: "Keine Anmeldung erforderlich",
        url: "",
        description: "Treffpunkt zum Austausch mit der Familienbeauftragten."
      },
      {
        date: "2026-08-06",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-06",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-09",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-11",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-12",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-13",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-13",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-16",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-16",
        title: "Bunt backen mit Kindern: Regenbogen-Muffins & Cake-Pops",
        time: "16:00 - 18:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-18",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-19",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-20",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-20",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-23",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-25",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-26",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-27",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-27",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-30",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      }
    ];
 
    const weekdayLabels = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
    const monthName = "August";
    const year = 2026;
    const monthIndex = 7;
    const calendarGrid = document.getElementById("calendarGrid");
    const dialog = document.getElementById("eventDialog");
 
    const grouped = events.reduce((acc, item) => {
      const day = Number(item.date.split("-")[2]);
      if (!acc[day]) acc[day] = [];
      acc[day].push(item);
      return acc;
    }, {});
 
    const firstDay = new Date(year, monthIndex, 1);
    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
    const offset = (firstDay.getDay() + 6) % 7;
 
    for (let i = 0; i < offset; i++) {
      const empty = document.createElement("div");
      empty.className = "day-card empty";
      empty.setAttribute("aria-hidden", "true");
      calendarGrid.appendChild(empty);
    }
 
    for (let day = 1; day <= daysInMonth; day++) {
      const card = document.createElement("article");
      card.className = "day-card";
 
      const items = grouped[day] || [];
      const weekday = weekdayLabels[(offset + day - 1) % 7];
      const top = document.createElement("div");
      top.className = "day-top";
      top.innerHTML = `
        <div class="day-number">${weekday}, ${day}. ${monthName}</div>
        ${items.length ? `<div class="event-count">${items.length} Termin${items.length > 1 ? 'e' : ''}</div>` : ''}
      `;
      card.appendChild(top);
 
      const list = document.createElement("div");
      list.className = "events-list";
 
      if (!items.length) {
        const emptyText = document.createElement("div");
        emptyText.className = "muted-empty";
        emptyText.textContent = "Keine Einträge";
        list.appendChild(emptyText);
      } else {
        items.forEach(item => {
          const btn = document.createElement("button");
          btn.className = "event-chip";
          btn.type = "button";
          btn.innerHTML = `<span class="event-time">${item.time || 'Uhrzeit offen'}</span><span class="event-title">${item.title}</span>`;
          btn.addEventListener("click", () => openDialog(item));
          list.appendChild(btn);
        });
      }
 
      card.appendChild(list);
      calendarGrid.appendChild(card);
    }
 
    const fields = {
      title: document.getElementById("dialogTitle"),
      date: document.getElementById("dialogDate"),
      time: document.getElementById("dialogTime"),
      location: document.getElementById("dialogLocation"),
      audience: document.getElementById("dialogAudience"),
      registration: document.getElementById("dialogRegistration"),
      description: document.getElementById("dialogDescription"),
      link: document.getElementById("dialogLink")
    };
 
    function formatDate(dateString) {
      return new Date(dateString + "T00:00:00").toLocaleDateString("de-DE", {
        weekday: "long",
        day: "numeric",
        month: "long",
        year: "numeric"
      });
    }
 
    function fillValue(el, value, fallback = "Keine Angabe") {
      el.textContent = value && String(value).trim() ? value : fallback;
      el.classList.toggle("muted-empty", !(value && String(value).trim()));
    }
 
    function openDialog(item) {
      fields.title.textContent = item.title;
      fillValue(fields.date, formatDate(item.date));
      fillValue(fields.time, item.time, "Uhrzeit offen");
      fillValue(fields.location, item.location);
      fillValue(fields.audience, item.audience);
      fillValue(fields.registration, item.registration);
      fillValue(fields.description, item.description);
 
      if (item.url && item.url.trim()) {
        fields.link.href = item.url;
        fields.link.style.display = "inline-flex";
      } else {
        fields.link.removeAttribute("href");
        fields.link.style.display = "none";
      }
 
      dialog.showModal();
    }
 
    function closeDialog() {
      dialog.close();
    }
 
    document.getElementById("closeDialog").addEventListener("click", closeDialog);
    document.getElementById("dialogCloseBottom").addEventListener("click", closeDialog);
 
    dialog.addEventListener("click", (event) => {
      const rect = dialog.getBoundingClientRect();
      const clickedOutside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
      if (clickedOutside) dialog.close();
    });
  </script>
</body>
</html>


<h3>Details zu den Terminen</h3>
<h3>Details zu den Terminen</h3>

Version vom 10. Juni 2026, 11:22 Uhr

Familienangebote im August 2026

Familienangebote im August 2026

In der Übersicht erscheinen nur Uhrzeit und Titel. Beim Klick öffnet sich ein Popup mit allen Details, Hinweisen zur Anmeldung und dem Link zu weiteren Informationen.

August 2026 · mobile optimiert

Datum
Uhrzeit
Ort
Zielgruppe
Anmeldung
Zusatztext
Mehr Infos

Details zu den Terminen

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