Testseite: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<html lang="de">
<html lang="de">
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Familienangebote August 2026</title>
<title>Kalender - August 2026</title>
 
<style>
<style>
body{
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    font-family: Arial, sans-serif;
    margin:20px;
    background:#f5f5f5;
}


h1{
     body {
     text-align:center;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
      background: #f1f5f9;
 
      color: #1e293b;
.toolbar{
      padding: 1.5rem 1rem 3rem;
    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 class="toolbar">
    <button onclick="exportData()">Export JSON</button>
    <button onclick="exportPDF()">Export PDF</button>
    <button onclick="exportExcel()">Export Excel</button>
 
    <input type="file" id="importFile" onchange="importData(event)">
</div>
 
<div class="calendar" id="calendar"></div>


<div class="modal" id="modal">
    /* ===== HEADER ===== */
    <div class="modal-content">
     .cal-header {
 
       max-width: 860px;
        <button class="close-btn" onclick="closeModal()">Schließen</button>
       margin-bottom: 1.25rem;
 
       display: flex;
        <h2 id="modalDate"></h2>
       align-items: baseline;
 
       gap: 1rem;
        <button onclick="addEntry()">+ Neuer Eintrag</button>
 
        <div id="entriesContainer"></div>
 
    </div>
</div>
 
<script>
 
let 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."
     }
     }
  ],
     .cal-header h2 {
 
       font-size: 1.6rem;
  "2": [
       font-weight: 700;
     {
       color: #0f172a;
       angebot: "Eiscafé frieDa",
       letter-spacing: -0.03em;
      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."
     }
     }
  ],
     .cal-header p {
 
       font-size: 0.8rem;
  "4": [
       color: #94a3b8;
     {
       font-weight: 400;
       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": [
    /* ===== GRID WRAPPER ===== */
     {
     .cal-wrap {
       angebot: "Spielplatztreff",
       max-width: 860px;
       uhrzeit: "14:30-15:30",
       display: grid;
       ort: "Piratenspielplatz, Anlagenpark",
      grid-template-columns: repeat(7, 1fr);
       zielgruppe: "Familien mit jüngeren Kindern",
      border-radius: 16px;
       anmeldung: "-",
       overflow: hidden;
       link: "",
       box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.08);
       beschreibung: "Treffpunkt zum Austausch mit der Familienbeauftragten."
       border: 1px solid #e2e8f0;
       background: #e2e8f0; /* gap color between cells */
       gap: 1px;
     }
     }
  ],
  "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."


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


  "9": [
    /* ===== DAY CELLS ===== */
     {
     .day-empty {
      angebot: "Eiscafé frieDa",
       min-height: 90px;
      uhrzeit: "14:00-17:00",
       background: #f8fafc;
       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": [
     .day {
     {
       min-height: 90px;
       angebot: "BabyBrunch",
       padding: 0.5rem 0.5rem 0.4rem;
       uhrzeit: "09:30-11:30",
      background: #ffffff;
       ort: "elkiko Familienzentrum",
       display: flex;
       zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
       flex-direction: column;
       anmeldung: "babybrunch@elkiko.de",
       gap: 0.3rem;
       link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
       position: relative;
       beschreibung: ""
       transition: background 0.1s;
     }
     }
  ],
    .day.we { background: #fafbff; }


  "12": [
    .day-num {
    {
      font-size: 0.75rem;
       angebot: "Spielplatztreff",
      font-weight: 600;
       uhrzeit: "14:30-15:30"
      color: #64748b;
      line-height: 1;
      width: 22px;
      height: 22px;
      display: flex;
       align-items: center;
       justify-content: center;
      border-radius: 50%;
      flex-shrink: 0;
     }
     }
  ],


  "13": [
     /* ===== CSS-ONLY POPUP ===== */
     {
     .ev-toggle { display: none; }
      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": [
     .ev-chip {
     {
      display: block;
angebot: "Eiscafé frieDa",
       background: #eff6ff;
       uhrzeit: "14:00-17:00",
      border-left: 3px solid #3b82f6;
       ort: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
       border-radius: 0 6px 6px 0;
       zielgruppe: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
       padding: 0.22rem 0.4rem;
       anmeldung: "",
       font-size: 0.67rem;
       link: "https://www.lebenshilfe-tuebingen.de/service/termine/",
       line-height: 1.35;
       beschreibung: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
       cursor: pointer;
    },
       user-select: none;
    {
       transition: background 0.15s, transform 0.1s;
       angebot: "Bunt backen mit Kindern: Regenbogen-Muffins & Cake-Pops",
       uhrzeit: "16:00 - 18:30"
     }
     }
  ],
     .ev-chip:hover {
 
       background: #dbeafe;
  "18": [
       transform: translateY(-1px);
     {
      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: ""
     }
     }
  ],
    .chip-time  { font-weight: 700; color: #2563eb; display: block; }
    .chip-title { color: #1e40af; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  "19": [
    /* Overlay */
     {
     .ev-overlay {
       angebot: "Spielplatztreff",
       display: none;
       uhrzeit: "14:30-15:30"
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
       backdrop-filter: blur(2px);
      z-index: 9998;
      cursor: pointer;
     }
     }
  ],


  "20": [
    /* Modal */
     {
     .ev-modal {
    angebot: "BabyBrunch",
      display: none;
       uhrzeit: "09:30-11:30",
       position: fixed;
       ort: "elkiko Familienzentrum",
      top: 50%;
       zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
      left: 50%;
       anmeldung: "babybrunch@elkiko.de",
       transform: translate(-50%, -50%);
       link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
       z-index: 9999;
       beschreibung: ""
       background: #fff;
    },
       border-radius: 16px;
    {
       max-width: 460px;
       angebot: "Sommerferien mit dem LESE-HAUS",
       width: calc(100% - 2rem);
       uhrzeit: "11:00"
       padding: 2rem;
ort: Alter Botanischer Garten, Wiese neben dem Kinderspielplatz, bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
      box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
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": [
     .ev-toggle:checked ~ .ev-overlay { display: block; }
     {
    .ev-toggle:checked ~ .ev-modal  { display: block; }
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": [
     .ev-modal-date {
     {
       font-size: 0.72rem;
       angebot: "BabyBrunch",
       font-weight: 600;
       uhrzeit: "09:30-11:30",
       color: #3b82f6;
       ort: "elkiko Familienzentrum",
       letter-spacing: 0.07em;
       zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
       text-transform: uppercase;
       anmeldung: "babybrunch@elkiko.de",
       margin-bottom: 0.4rem;
       link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
      beschreibung: ""
     }
     }
  ],
    .ev-modal-title {
 
      font-size: 1.3rem;
  "26": [
      font-weight: 700;
    {
      color: #0f172a;
       angebot: "Spielplatztreff",
       letter-spacing: -0.02em;
       uhrzeit: "14:30-15:30"
       margin-bottom: 0.75rem;
      line-height: 1.3;
     }
     }
  ],
     .ev-modal-time {
 
       display: inline-flex;
  "27": [
       align-items: center;
     {
       gap: 0.35rem;
       angebot: "BabyBrunch",
       font-size: 0.82rem;
       uhrzeit: "09:30-11:30",
       font-weight: 600;
       ort: "elkiko Familienzentrum",
       color: #2563eb;
       zielgruppe: "Eltern mit Säuglingen und Kleinkindern",
       background: #eff6ff;
      anmeldung: "babybrunch@elkiko.de",
       border-radius: 20px;
       link: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
      padding: 0.3rem 0.8rem;
       beschreibung: ""
      margin-bottom: 1rem;
    },
    {
       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."
     }
     }
  ],
     .ev-modal-note {
 
       font-size: 0.88rem;
  "30": [
       color: #475569;
     {
       line-height: 1.65;
      angebot: "Eiscafé frieDa",
       margin-bottom: 1.25rem;
       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."
     }
     }
  ]
     .ev-modal-link {
};
      display: inline-flex;
 
      align-items: center;
 
      gap: 0.4rem;
let selectedDay = null;
      background: #2563eb;
 
      color: #fff;
const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
      text-decoration: none;
 
      font-size: 0.82rem;
function saveData(){
      font-weight: 600;
    renderCalendar();
      border-radius: 8px;
}
      padding: 0.5rem 1rem;
 
      transition: background 0.15s;
function renderCalendar(){
 
     const cal = document.getElementById("calendar");
    cal.innerHTML = "";
 
    weekdays.forEach(day=>{
        const div = document.createElement("div");
        div.className = "weekday";
        div.textContent = day;
        cal.appendChild(div);
    });
 
    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);
     }
     }
    .ev-modal-link:hover { background: #1d4ed8; }


     for(let day=1; day<=31; day++){
     /* Close button */
 
    .ev-close {
        const div = document.createElement("div");
      position: absolute;
        div.className = "day";
      top: 1rem;
 
      right: 1rem;
        div.onclick = () => openDay(day);
      background: #f1f5f9;
 
      border: none;
        const dayNumber = document.createElement("div");
      border-radius: 50%;
        dayNumber.className = "day-number";
      width: 30px;
        dayNumber.textContent = day;
      height: 30px;
 
      cursor: pointer;
        div.appendChild(dayNumber);
      font-size: 0.8rem;
 
      color: #64748b;
        const entries = data[day] || [];
      display: flex;
 
      align-items: center;
        entries.forEach(entry=>{
      justify-content: center;
            const e = document.createElement("div");
      user-select: none;
            e.className = "entry";
      transition: background 0.15s;
            e.textContent = entry.angebot || "(ohne Titel)";
            div.appendChild(e);
        });
 
        cal.appendChild(div);
     }
     }
}
     .ev-close:hover { background: #e2e8f0; color: #0f172a; }
 
function openDay(day){
 
     selectedDay = day;
 
    document.getElementById("modal").style.display="flex";
    document.getElementById("modalDate").textContent =
        `Samstag, ${day}. August 2026`.replace("Samstag", new Date(2026,7,day)
        .toLocaleDateString("de-DE",{weekday:"long"}));
 
    renderEntries();
}
 
function closeModal(){
    document.getElementById("modal").style.display="none";
}
 
function renderEntries(){
 
    const container = document.getElementById("entriesContainer");
    container.innerHTML = "";


     if(!data[selectedDay]){
     /* ===== MOBILE ===== */
        data[selectedDay] = [];
    @media (max-width: 580px) {
      body { padding: 1rem 0.5rem 2rem; }
      .cal-header { flex-direction: column; gap: 0.2rem; }
      .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>
</head>
<body>


    data[selectedDay].forEach((entry,index)=>{
<div class="cal-header">
 
  <h2>Kalender - August 2026</h2>
        const card = document.createElement("div");
  <p>Klick auf einen Termin fuer mehr Details</p>
        card.className = "entry-card";
 
        card.innerHTML = `
            <label>Angebot</label>
            <input value="${entry.angebot || ''}" onchange="updateField(${index},'angebot',this.value)">
 
            <label>Uhrzeit</label>
            <input value="${entry.uhrzeit || ''}" onchange="updateField(${index},'uhrzeit',this.value)">
 
            <label>Treffpunkt/Ort</label>
            <input value="${entry.ort || ''}" onchange="updateField(${index},'ort',this.value)">
 
            <label>Zielgruppe</label>
            <input value="${entry.zielgruppe || ''}" onchange="updateField(${index},'zielgruppe',this.value)">
 
            <label>Anmeldung</label>
            <input value="${entry.anmeldung || ''}" onchange="updateField(${index},'anmeldung',this.value)">
 
            <label>Link zum Angebot</label>
            <input value="${entry.link || ''}" onchange="updateField(${index},'link',this.value)">
 
            <label>Beschreibung</label>
            <textarea rows="4" onchange="updateField(${index},'beschreibung',this.value)">${entry.beschreibung || ''}</textarea>
 
          <div class="actions">
    <button onclick="copyEntryToDate(${index})">
        Auf anderes Datum kopieren
    </button>
 
    <button onclick="deleteEntry(${index})">
        Löschen
    </button>
</div>
</div>
        `;


        container.appendChild(card);
<div class="cal-wrap">
    });
  <span class="col-header">Mo</span>
}
  <span class="col-header">Di</span>
function copyEntryToDate(index){
  <span class="col-header">Mi</span>
  <span class="col-header">Do</span>
  <span class="col-header">Fr</span>
  <span class="col-header">Sa</span>
  <span class="col-header">So</span>


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


     if(!targetDay) return;
     <!-- ============================================================
    LEERE ZELLEN: August 2026 beginnt an einem Samstag (Spalte 6)
    -> 5 leere Zellen fuer Mo bis Fr
    ============================================================ -->
    <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 -->


     const day = parseInt(targetDay);
     <!-- Sa  1 --> <div class="day we"><div class="day-num">1</div></div>
    <!-- So  2 --> <div class="day we"><div class="day-num">2</div></div>
    <!-- Mo  3 --> <div class="day">  <div class="day-num">3</div></div>
    <!-- Di  4 --> <div class="day">  <div class="day-num">4</div></div>


     if(day < 1 || day > 31){
     <!-- ============================================================
        alert("Ungültiger Tag.");
    TERMIN HINZUFUEGEN: Kopiere den Block zwischen den Stern-Kommentaren
        return;
    in den gewuenschten Tag. Aendere:
     }
      - 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)
     ============================================================ -->


     if(!data[day]){
     <!-- Mi  5 - TERMIN -->
         data[day] = [];
    <div class="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>


     const copy = JSON.parse(
     <!-- Do  6 --> <div class="day">  <div class="day-num">6</div></div>
        JSON.stringify(data[selectedDay][index])
    <!-- Fr  7 --> <div class="day">  <div class="day-num">7</div></div>
     );
    <!-- Sa  8 --> <div class="day we"><div class="day-num">8</div></div>
    <!-- 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>


     data[day].push(copy);
     <!-- Mi 12 - TERMIN -->
    <div class="day">
      <div class="day-num">12</div>
      <!-- *** 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>


     saveData();
     <!-- Do 13 --> <div class="day">  <div class="day-num">13</div></div>
    <!-- Fr 14 --> <div class="day">  <div class="day-num">14</div></div>
    <!-- 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>


     alert(
     <!-- So 23 - TERMIN -->
        "Termin wurde auf den "
    <div class="day we">
        + day +
      <div class="day-num">23</div>
        ". August kopiert."
      <!-- *** TERMIN ANFANG *** -->
    );
      <input type="checkbox" class="ev-toggle" id="ev-03">
}
      <label class="ev-chip" for="ev-03">
function addEntry(){
         <span class="chip-time">11:00</span>
 
         <span class="chip-title">Familienfest Stadtpark</span>
    data[selectedDay].push({
      </label>
        angebot:"",
      <label class="ev-overlay" for="ev-03"></label>
         uhrzeit:"",
      <div class="ev-modal">
         ort:"",
         <label class="ev-close" for="ev-03">✕</label>
        zielgruppe:"",
         <div class="ev-modal-date">Sonntag, 23. August 2026</div>
        anmeldung:"",
         <div class="ev-modal-title">Familienfest im Stadtpark</div>
        link:"",
         <div class="ev-modal-time">🕐 11:00 Uhr</div>
         beschreibung:""
         <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>
    saveData();
      <!-- *** TERMIN ENDE *** -->
    renderEntries();
     </div>
}
 
function updateField(index, field, value){
 
    data[selectedDay][index][field] = value;
 
    saveData();
}
 
function deleteEntry(index){
 
    if(confirm("Eintrag löschen?")){
 
         data[selectedDay].splice(index,1);
 
         saveData();
         renderEntries();
    }
}
 
function copyEntry(index){
 
    const copy = JSON.parse(
         JSON.stringify(data[selectedDay][index])
    );
 
    data[selectedDay].push(copy);
 
    saveData();
    renderEntries();
}
 
function exportData(){
 
    const blob = new Blob(
        [JSON.stringify(data,null,2)],
         {type:"application/json"}
    );
 
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "familienangebote_august_2026.json";
    a.click();
}
 
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);
     <!-- Mo 24 --> <div class="day">  <div class="day-num">24</div></div>
}
    <!-- Di 25 --> <div class="day">  <div class="day-num">25</div></div>
    <!-- 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>


renderCalendar();
    <!-- ============================================================
    LEERE ZELLEN NACH TAG 31
    31. August = Montag -> noch 6 leere Zellen (Di bis So)
    ============================================================ -->
    <div class="day-empty"></div><!-- Di -->
    <div class="day-empty"></div><!-- Mi -->
    <div class="day-empty"></div><!-- Do -->
    <div class="day-empty"></div><!-- Fr -->
    <div class="day-empty"></div><!-- Sa -->
    <div class="day-empty"></div><!-- So -->


</script>
</div><!-- .cal-wrap -->


</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“