Testseite: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
Zeile 8: Zeile 8:


     body {
     body {
       font-family: 'Segoe UI', system-ui, sans-serif;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       background: #f0f4f8;
       background: #f1f5f9;
       color: #1a202c;
       color: #1e293b;
      min-height: 100vh;
       padding: 1.5rem 1rem 3rem;
       padding: 1.5rem 1rem 3rem;
     }
     }


     header { text-align: center; margin-bottom: 1.75rem; }
     /* ===== HEADER ===== */
 
    .cal-header {
     header h1 {
      max-width: 860px;
       font-size: clamp(1.5rem, 5vw, 2.25rem);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }
     .cal-header h2 {
       font-size: 1.6rem;
       font-weight: 700;
       font-weight: 700;
       letter-spacing: -0.02em;
      color: #0f172a;
      color: #1a202c;
       letter-spacing: -0.03em;
     }
     }
 
     .cal-header p {
     header p { color: #64748b; font-size: 0.9rem; margin-top: 0.3rem; }
      font-size: 0.8rem;
 
       color: #94a3b8;
    .calendar {
       font-weight: 400;
       max-width: 900px;
      margin: 0 auto;
      background: #fff;
       border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.08);
     }
     }


     .weekdays {
    /* ===== GRID WRAPPER ===== */
     .cal-wrap {
      max-width: 860px;
       display: grid;
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       grid-template-columns: repeat(7, 1fr);
       background: #1e3a5f;
      border-radius: 16px;
       color: #fff;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.08);
      border: 1px solid #e2e8f0;
       background: #e2e8f0; /* gap color between cells */
       gap: 1px;
     }
     }


     .weekdays span {
    /* ===== COLUMN HEADERS ===== */
     .col-header {
      background: #1e293b;
       text-align: center;
       text-align: center;
       padding: 0.65rem 0;
       padding: 0.6rem 0.2rem;
       font-size: 0.75rem;
       font-size: 0.7rem;
       font-weight: 600;
       font-weight: 600;
       letter-spacing: 0.06em;
      color: #94a3b8;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       text-transform: uppercase;
     }
     }


     .days {
    /* ===== DAY CELLS ===== */
       display: grid;
     .day-empty {
      grid-template-columns: repeat(7, 1fr);
       min-height: 90px;
      border-left: 1px solid #e2e8f0;
       background: #f8fafc;
       border-top: 1px solid #e2e8f0;
     }
     }


     .day {
     .day {
       min-height: 90px;
       min-height: 90px;
       padding: 0.45rem;
       padding: 0.5rem 0.5rem 0.4rem;
      border-right: 1px solid #e2e8f0;
       background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
       background: #fff;
       display: flex;
       display: flex;
       flex-direction: column;
       flex-direction: column;
       gap: 0.3rem;
       gap: 0.3rem;
      position: relative;
      transition: background 0.1s;
     }
     }
    .day.we { background: #fafbff; }


     .day.empty { background: #f8fafc; }
     .day-num {
 
      font-size: 0.75rem;
    .day.today .day-number {
      font-weight: 600;
      background: #1e3a5f;
       color: #64748b;
       color: #fff;
       line-height: 1;
       border-radius: 50%;
       width: 22px;
       width: 26px;
       height: 22px;
       height: 26px;
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       justify-content: center;
       justify-content: center;
      border-radius: 50%;
      flex-shrink: 0;
     }
     }


     .day-number {
     /* ===== CSS-ONLY POPUP ===== */
      font-size: 0.8rem;
    .ev-toggle { display: none; }
      font-weight: 600;
      color: #475569;
      line-height: 1;
      margin-bottom: 0.1rem;
    }


     .event-chip {
     .ev-chip {
       background: #dbeafe;
      display: block;
       border-left: 3px solid #2563eb;
       background: #eff6ff;
       border-radius: 4px;
       border-left: 3px solid #3b82f6;
       padding: 0.2rem 0.35rem;
       border-radius: 0 6px 6px 0;
       font-size: 0.7rem;
       padding: 0.22rem 0.4rem;
       line-height: 1.3;
       font-size: 0.67rem;
       line-height: 1.35;
       cursor: pointer;
       cursor: pointer;
      user-select: none;
       transition: background 0.15s, transform 0.1s;
       transition: background 0.15s, transform 0.1s;
      word-break: break-word;
     }
     }
 
     .ev-chip:hover {
     .event-chip:hover { background: #bfdbfe; transform: translateY(-1px); }
      background: #dbeafe;
 
      transform: translateY(-1px);
    .event-chip .chip-time {
      font-weight: 700;
      color: #1d4ed8;
      display: block;
     }
     }
    .chip-time  { font-weight: 700; color: #2563eb; display: block; }
    .chip-title { color: #1e40af; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


     .event-chip .chip-title {
     /* Overlay */
      color: #1e3a5f;
     .ev-overlay {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
 
     .modal-overlay {
       display: none;
       display: none;
       position: fixed;
       position: fixed;
       inset: 0;
       inset: 0;
       background: rgba(15, 23, 42, 0.55);
       background: rgba(15, 23, 42, 0.6);
       z-index: 100;
       backdrop-filter: blur(2px);
       align-items: center;
       z-index: 9998;
      justify-content: center;
       cursor: pointer;
       padding: 1rem;
     }
     }


     .modal-overlay.open { display: flex; }
    /* Modal */
 
     .ev-modal {
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
       background: #fff;
       background: #fff;
       border-radius: 16px;
       border-radius: 16px;
       max-width: 480px;
       max-width: 460px;
       width: 100%;
       width: calc(100% - 2rem);
       padding: 2rem;
       padding: 2rem;
      position: relative;
       box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
       box-shadow: 0 20px 60px rgba(0,0,0,.2);
      animation: pop .18s ease-out;
    }
 
    @keyframes pop {
      from { opacity: 0; transform: scale(.94); }
      to  { opacity: 1; transform: scale(1); }
    }
 
    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: #f1f5f9;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      transition: background .15s;
     }
     }


     .modal-close:hover { background: #e2e8f0; }
     .ev-toggle:checked ~ .ev-overlay { display: block; }
    .ev-toggle:checked ~ .ev-modal  { display: block; }


     .modal-date {
     .ev-modal-date {
       font-size: 0.8rem;
       font-size: 0.72rem;
       font-weight: 600;
       font-weight: 600;
       letter-spacing: 0.05em;
      color: #3b82f6;
       letter-spacing: 0.07em;
       text-transform: uppercase;
       text-transform: uppercase;
      color: #2563eb;
       margin-bottom: 0.4rem;
       margin-bottom: 0.4rem;
     }
     }
 
     .ev-modal-title {
     .modal-title {
       font-size: 1.3rem;
       font-size: 1.3rem;
       font-weight: 700;
       font-weight: 700;
       color: #1a202c;
       color: #0f172a;
       margin-bottom: 0.6rem;
      letter-spacing: -0.02em;
       margin-bottom: 0.75rem;
       line-height: 1.3;
       line-height: 1.3;
     }
     }
 
     .ev-modal-time {
     .modal-time {
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       gap: 0.4rem;
       gap: 0.35rem;
      background: #f0f9ff;
       font-size: 0.82rem;
      color: #0369a1;
      border-radius: 6px;
      padding: 0.3rem 0.7rem;
       font-size: 0.85rem;
       font-weight: 600;
       font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border-radius: 20px;
      padding: 0.3rem 0.8rem;
       margin-bottom: 1rem;
       margin-bottom: 1rem;
     }
     }
 
     .ev-modal-note {
     .modal-note {
       font-size: 0.88rem;
       font-size: 0.9rem;
       color: #475569;
       color: #475569;
       line-height: 1.6;
       line-height: 1.65;
       margin-bottom: 1.2rem;
       margin-bottom: 1.25rem;
     }
     }
 
     .ev-modal-link {
     .modal-link {
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       gap: 0.4rem;
       gap: 0.4rem;
       background: #1e3a5f;
       background: #2563eb;
       color: #fff;
       color: #fff;
       text-decoration: none;
       text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
       border-radius: 8px;
       border-radius: 8px;
       padding: 0.55rem 1.1rem;
       padding: 0.5rem 1rem;
      font-size: 0.85rem;
       transition: background 0.15s;
      font-weight: 600;
       transition: background .15s;
     }
     }
    .ev-modal-link:hover { background: #1d4ed8; }


     .modal-link:hover { background: #2563eb; }
    /* Close button */
     .ev-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: #f1f5f9;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
      font-size: 0.8rem;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: background 0.15s;
    }
    .ev-close:hover { background: #e2e8f0; color: #0f172a; }


     @media (max-width: 600px) {
    /* ===== MOBILE ===== */
       .weekdays span { font-size: 0.62rem; }
     @media (max-width: 580px) {
       .day { min-height: 60px; padding: 0.3rem; }
      body { padding: 1rem 0.5rem 2rem; }
       .event-chip { font-size: 0.62rem; padding: 0.15rem 0.25rem; }
      .cal-header { flex-direction: column; gap: 0.2rem; }
       .event-chip .chip-title { display: none; }
      .cal-header h2 { font-size: 1.3rem; }
       .col-header { font-size: 0.58rem; padding: 0.5rem 0; }
       .day, .day-empty { min-height: 56px; }
      .day { padding: 0.3rem 0.25rem; }
      .day-num { font-size: 0.68rem; }
       .ev-chip { font-size: 0.6rem; padding: 0.15rem 0.25rem; }
       .chip-title { display: none; }
     }
     }
   </style>
   </style>
Zeile 230: Zeile 229:
<body>
<body>


<header>
<div class="cal-header">
   <h1>August 2026</h1>
   <h2>Kalender - August 2026</h2>
   <p>Klick auf einen Termin fur mehr Details</p>
   <p>Klick auf einen Termin fuer mehr Details</p>
</header>
 
<div class="calendar">
  <div class="weekdays">
    <span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span>
  </div>
  <div class="days" id="calGrid"></div>
</div>
</div>


<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true">
<div class="cal-wrap">
   <div class="modal">
   <span class="col-header">Mo</span>
    <button class="modal-close" id="modalClose" aria-label="Schliessen">✕</button>
  <span class="col-header">Di</span>
    <div class="modal-date" id="mDate"></div>
  <span class="col-header">Mi</span>
    <div class="modal-title" id="mTitle"></div>
  <span class="col-header">Do</span>
    <div class="modal-time">🕐 <span id="mTimeText"></span></div>
  <span class="col-header">Fr</span>
    <div class="modal-note" id="mNote"></div>
  <span class="col-header">Sa</span>
    <a class="modal-link" id="mLink" href="#" target="_blank" rel="noopener">
  <span class="col-header">So</span>
      🔗 Mehr Infos
    </a>
  </div>
</div>


<script>
  // ==================================================
  // TERMINE - hier pflegen
  // ==================================================
  var events = [
    {
      datum: "2026-08-05",
      titel: "Stadtfest Reutlingen",
      uhrzeit: "14:00",
      zusatztext: "Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.",
      url: "https://www.reutlingen.de"
    },
    {
      datum: "2026-08-12",
      titel: "Team-Meeting Q3",
      uhrzeit: "09:30",
      zusatztext: "Quartals-Review mit allen Abteilungen. Bitte Berichte bis 08.08. einreichen. Video-Call-Link wird separat verschickt.",
      url: "https://meet.example.com/q3-review"
    },
    {
      datum: "2026-08-22",
      titel: "Open-Air Kino",
      uhrzeit: "21:00",
      zusatztext: "Filmabend im Stadtpark - gezeigt wird Cinema Paradiso (1988). Einlass ab 20:00 Uhr, Decke und Sitzkissen empfohlen. Eintritt frei.",
      url: "https://www.openair-kino-beispiel.de"
    }
  ];
  // ==================================================


  var byDate = {};
    <!-- ============================================================
  events.forEach(function(e) {
    LEERE ZELLEN: August 2026 beginnt an einem Samstag (Spalte 6)
     if (!byDate[e.datum]) byDate[e.datum] = [];
     -> 5 leere Zellen fuer Mo bis Fr
     byDate[e.datum].push(e);
    ============================================================ -->
  });
    <div class="day-empty"></div><!-- Mo -->
    <div class="day-empty"></div><!-- Di -->
    <div class="day-empty"></div><!-- Mi -->
     <div class="day-empty"></div><!-- Do -->
    <div class="day-empty"></div><!-- Fr -->


  var grid = document.getElementById('calGrid');
    <!-- Sa  1 --> <div class="day we"><div class="day-num">1</div></div>
  var year = 2026;
    <!-- So  2 --> <div class="day we"><div class="day-num">2</div></div>
  var month = 7;
    <!-- Mo  3 --> <div class="day">   <div class="day-num">3</div></div>
  var firstDay = new Date(year, month, 1).getDay();
    <!-- Di  4 --> <div class="day">   <div class="day-num">4</div></div>
   var offset = (firstDay + 6) % 7;
  var daysInMonth = new Date(year, month + 1, 0).getDate();
   var today = new Date();


  for (var i = 0; i < offset; i++) {
    <!-- ============================================================
     var empty = document.createElement('div');
     TERMIN HINZUFUEGEN: Kopiere den Block zwischen den Stern-Kommentaren
    empty.className = 'day empty';
    in den gewuenschten Tag. Aendere:
    grid.appendChild(empty);
      - id="ev-XX"  -> eindeutige ID, z.B. ev-04, ev-05 ...
  }
      - chip-time  -> Uhrzeit
      - chip-title  -> Kurztitel (wird im Chip angezeigt)
      - ev-modal-date  -> Datum ausgeschrieben
      - ev-modal-title -> Voller Titel
      - ev-modal-time  -> Uhrzeit
      - ev-modal-note  -> Beschreibungstext
      - href          -> URL (oder ganzen <a>-Tag entfernen wenn keine URL)
    ============================================================ -->


  for (var d = 1; d <= daysInMonth; d++) {
    <!-- Mi  5 - TERMIN -->
    var cell = document.createElement('div');
    <div class="day">
    cell.className = 'day';
      <div class="day-num">5</div>
      <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-01">
      <label class="ev-chip" for="ev-01">
        <span class="chip-time">14:00</span>
        <span class="chip-title">Stadtfest Tuebingen</span>
      </label>
      <label class="ev-overlay" for="ev-01"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-01">✕</label>
        <div class="ev-modal-date">Mittwoch, 5. August 2026</div>
        <div class="ev-modal-title">Stadtfest Tuebingen</div>
        <div class="ev-modal-time">🕐 14:00 Uhr</div>
        <div class="ev-modal-note">Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.</div>
        <a class="ev-modal-link" href="https://www.tuebingen.de" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>


     var isToday = today.getFullYear() === year
     <!-- Do  6 --> <div class="day">  <div class="day-num">6</div></div>
      && today.getMonth() === month
    <!-- Fr  7 --> <div class="day">  <div class="day-num">7</div></div>
      && today.getDate() === d;
    <!-- Sa  8 --> <div class="day we"><div class="day-num">8</div></div>
     if (isToday) cell.classList.add('today');
    <!-- So  9 --> <div class="day we"><div class="day-num">9</div></div>
    <!-- Mo 10 --> <div class="day">  <div class="day-num">10</div></div>
     <!-- Di 11 --> <div class="day">  <div class="day-num">11</div></div>


     var num = document.createElement('div');
     <!-- Mi 12 - TERMIN -->
    num.className = 'day-number';
    <div class="day">
    num.textContent = d;
      <div class="day-num">12</div>
     cell.appendChild(num);
      <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-02">
      <label class="ev-chip" for="ev-02">
        <span class="chip-time">09:30</span>
        <span class="chip-title">Netzwerktreffen Buendnis</span>
      </label>
      <label class="ev-overlay" for="ev-02"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-02">✕</label>
        <div class="ev-modal-date">Mittwoch, 12. August 2026</div>
        <div class="ev-modal-title">Netzwerktreffen Buendnis fuer Familie</div>
        <div class="ev-modal-time">🕐 09:30 Uhr</div>
        <div class="ev-modal-note">Quartalsweise Netzwerktreffen aller Mitglieder des Buendnisses fuer Familie Tuebingen. Bitte Berichte bis 08.08. einreichen.</div>
        <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Netzwerke_und_Arbeitsgruppen" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
     </div>


     var mm = String(month + 1).padStart(2, '0');
     <!-- Do 13 --> <div class="day">  <div class="day-num">13</div></div>
     var dd = String(d).padStart(2, '0');
    <!-- Fr 14 --> <div class="day">  <div class="day-num">14</div></div>
     var dateKey = year + '-' + mm + '-' + dd;
    <!-- Sa 15 --> <div class="day we"><div class="day-num">15</div></div>
     <!-- So 16 --> <div class="day we"><div class="day-num">16</div></div>
     <!-- Mo 17 --> <div class="day">  <div class="day-num">17</div></div>
    <!-- Di 18 --> <div class="day">  <div class="day-num">18</div></div>
    <!-- Mi 19 --> <div class="day">  <div class="day-num">19</div></div>
    <!-- Do 20 --> <div class="day">  <div class="day-num">20</div></div>
    <!-- Fr 21 --> <div class="day">  <div class="day-num">21</div></div>
    <!-- Sa 22 --> <div class="day we"><div class="day-num">22</div></div>


     if (byDate[dateKey]) {
     <!-- So 23 - TERMIN -->
       byDate[dateKey].forEach(function(ev) {
    <div class="day we">
         var chip = document.createElement('div');
      <div class="day-num">23</div>
         chip.className = 'event-chip';
       <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-03">
      <label class="ev-chip" for="ev-03">
        <span class="chip-time">11:00</span>
        <span class="chip-title">Familienfest Stadtpark</span>
      </label>
      <label class="ev-overlay" for="ev-03"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-03">✕</label>
        <div class="ev-modal-date">Sonntag, 23. August 2026</div>
        <div class="ev-modal-title">Familienfest im Stadtpark</div>
        <div class="ev-modal-time">🕐 11:00 Uhr</div>
         <div class="ev-modal-note">Grosses Familienfest mit Spiel, Spass und Unterhaltung fuer Kinder jeden Alters. Eintritt frei, Anmeldung nicht erforderlich.</div>
         <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Aktuelles" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>


        var timeSpan = document.createElement('span');
    <!-- Mo 24 --> <div class="day">  <div class="day-num">24</div></div>
        timeSpan.className = 'chip-time';
    <!-- Di 25 --> <div class="day">  <div class="day-num">25</div></div>
        timeSpan.textContent = ev.uhrzeit;
    <!-- Mi 26 --> <div class="day">  <div class="day-num">26</div></div>
    <!-- Do 27 --> <div class="day">  <div class="day-num">27</div></div>
    <!-- Fr 28 --> <div class="day">  <div class="day-num">28</div></div>
    <!-- Sa 29 --> <div class="day we"><div class="day-num">29</div></div>
    <!-- So 30 --> <div class="day we"><div class="day-num">30</div></div>
    <!-- Mo 31 --> <div class="day">  <div class="day-num">31</div></div>


        var titleSpan = document.createElement('span');
    <!-- ============================================================
        titleSpan.className = 'chip-title';
     LEERE ZELLEN NACH TAG 31
        titleSpan.textContent = ev.titel;
     31. August = Montag -> noch 6 leere Zellen (Di bis So)
 
    ============================================================ -->
        chip.appendChild(timeSpan);
     <div class="day-empty"></div><!-- Di -->
        chip.appendChild(titleSpan);
     <div class="day-empty"></div><!-- Mi -->
 
     <div class="day-empty"></div><!-- Do -->
        chip.addEventListener('click', (function(evData) {
     <div class="day-empty"></div><!-- Fr -->
          return function() { openModal(evData); };
     <div class="day-empty"></div><!-- Sa -->
        })(ev));
     <div class="day-empty"></div><!-- So -->
 
        cell.appendChild(chip);
      });
     }
 
     grid.appendChild(cell);
  }
 
  var overlay  = document.getElementById('modalOverlay');
  var btnClose = document.getElementById('modalClose');
 
  function openModal(ev) {
    var d = new Date(ev.datum + 'T00:00:00');
    document.getElementById('mDate').textContent =
      d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
     document.getElementById('mTitle').textContent  = ev.titel;
     document.getElementById('mTimeText').textContent = ev.uhrzeit + ' Uhr';
     document.getElementById('mNote').textContent    = ev.zusatztext;
     var link = document.getElementById('mLink');
     if (ev.url) {
      link.href = ev.url;
      link.style.display = 'inline-flex';
     } else {
      link.style.display = 'none';
    }
    overlay.classList.add('open');
  }


  function closeModal() { overlay.classList.remove('open'); }
</div><!-- .cal-wrap -->


  btnClose.addEventListener('click', closeModal);
  overlay.addEventListener('click', function(e) { if (e.target === overlay) closeModal(); });
  document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });
</script>
</body>
</body>
</html>
</html>

Aktuelle Version vom 10. Juni 2026, 11:26 Uhr

Kalender - August 2026

Kalender - August 2026

Klick auf einen Termin fuer mehr Details

Mo Di Mi Do Fr Sa So
1
2
3
4
5
Mittwoch, 5. August 2026
Stadtfest Tuebingen
🕐 14:00 Uhr
Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.
🔗 Mehr Infos
6
7
8
9
10
11
12
Mittwoch, 12. August 2026
Netzwerktreffen Buendnis fuer Familie
🕐 09:30 Uhr
Quartalsweise Netzwerktreffen aller Mitglieder des Buendnisses fuer Familie Tuebingen. Bitte Berichte bis 08.08. einreichen.
🔗 Mehr Infos
13
14
15
16
17
18
19
20
21
22
23
Sonntag, 23. August 2026
Familienfest im Stadtpark
🕐 11:00 Uhr
Grosses Familienfest mit Spiel, Spass und Unterhaltung fuer Kinder jeden Alters. Eintritt frei, Anmeldung nicht erforderlich.
🔗 Mehr Infos
24
25
26
27
28
29
30
31

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