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:
<html lang="de">
<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;
}
h2 {
    text-align: center;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.weekday {
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ddd;
}
.day {
    border: 1px solid #ccc;
    min-height: 280px;
    padding: 8px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s;
    overflow-wrap: break-word;
}
.day:hover {
    background: #f8f8f8;
}
.day-number {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}
.note {
    font-size: 12px;
    line-height: 1.4;
}
.note strong {
    display: block;
    margin-top: 5px;
}
</style>
</head>
<body>
<h2>Familienangebote – August 2026</h2>
<p>Klicke auf einen Tag, um einen Eintrag zu bearbeiten.</p>
<div class="calendar" id="calendar"></div>
<script>
const calendar = document.getElementById("calendar");
const calendar = document.getElementById("calendar");


Zeile 81: Zeile 10:
});
});


// August 2026 beginnt an einem Samstag
// August 2026 beginnt am Samstag
const firstDayOffset = 5;
const firstDayOffset = 5;


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


function renderDay(cell, day, data) {
for(let day = 1; day <= 31; day++) {


     cell.innerHTML = `
     const key = "august2026_" + day;
        <div class="day-number">${day}</div>
 
        <div class="note">
 
            <strong>Was:</strong>
            ${data.was || "-"}
 
            <strong>Wann:</strong>
            ${data.wann || "-"}


            <strong>Zielgruppe:</strong>
    let data = {
            ${data.zielgruppe || "-"}
        was: "",
        wann: "",
        zielgruppe: "",
        wo: "",
        anmeldung: "",
        link: ""
    };


            <strong>Wo:</strong>
    const saved = localStorage.getItem(key);
            ${data.wo || "-"}
 
            <strong>Anmeldung:</strong>
            ${data.anmeldung || "-"}
 
            <strong>Link:</strong>
            ${
                data.link
                ? `<a href="${data.link}" target="_blank">öffnen</a>`
                : "-"
            }
 
        </div>
    `;
}


for (let day = 1; day <= 31; day++) {
    if(saved){
        data = JSON.parse(saved);
    }


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


     const key = "august2026_" + day;
     renderCell();
 
    const savedData = JSON.parse(
        localStorage.getItem(key) || "{}"
    );
 
    renderDay(cell, day, savedData);


     cell.addEventListener("click", () => {
     cell.addEventListener("click", () => {


         const data = JSON.parse(
         const was = prompt("Was?", data.was);
            localStorage.getItem(key) || "{}"
         if(was === null) return;
         );


         const was = prompt("Was?", data.was || "");
         const wann = prompt("Wann?", data.wann);
         if (was === null) return;
         if(wann === null) return;


         const wann = prompt("Wann?", data.wann || "");
         const zielgruppe = prompt("Zielgruppe?", data.zielgruppe);
         if (wann === null) return;
         if(zielgruppe === null) return;


         const zielgruppe = prompt(
         const wo = prompt("Wo?", data.wo);
            "Zielgruppe?",
         if(wo === null) return;
            data.zielgruppe || ""
        );
         if (zielgruppe === null) return;


         const wo = prompt(
         const anmeldung = prompt("Anmeldung?", data.anmeldung);
            "Wo?",
         if(anmeldung === null) return;
            data.wo || ""
        );
         if (wo === null) return;


         const anmeldung = prompt(
         const link = prompt("Link?", data.link);
            "Anmeldung?",
         if(link === null) return;
            data.anmeldung || ""
        );
         if (anmeldung === null) return;


         const link = prompt(
         data = {
            "Link?",
            data.link || ""
        );
        if (link === null) return;
 
        const newData = {
             was,
             was,
             wann,
             wann,
Zeile 181: Zeile 71:
         };
         };


         localStorage.setItem(
         localStorage.setItem(key, JSON.stringify(data));
            key,
         renderCell();
            JSON.stringify(newData)
    });
         );
 
    function renderCell() {


         renderDay(cell, day, newData);
         cell.innerHTML = `
     });
            <div class="day-number">${day}</div>
 
            <div class="note">
                ${data.was ? `<strong>Was:</strong> ${data.was}<br>` : ""}
                ${data.wann ? `<strong>Wann:</strong> ${data.wann}<br>` : ""}
                ${data.zielgruppe ? `<strong>Zielgruppe:</strong> ${data.zielgruppe}<br>` : ""}
                ${data.wo ? `<strong>Wo:</strong> ${data.wo}<br>` : ""}
                ${data.anmeldung ? `<strong>Anmeldung:</strong> ${data.anmeldung}<br>` : ""}
                ${data.link ? `<strong>Link:</strong> <a href="${data.link}" target="_blank">Öffnen</a>` : ""}
            </div>
        `;
     }


     calendar.appendChild(cell);
     calendar.appendChild(cell);
}
}
</script>
</body>
</html>
```

Version vom 9. Juni 2026, 09:22 Uhr

const calendar = document.getElementById("calendar");

const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];

weekdays.forEach(day => { 

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

});

// August 2026 beginnt am Samstag const firstDayOffset = 5;

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

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

}

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

   const key = "august2026_" + day;

   let data = {
       was: "",
       wann: "",
       zielgruppe: "",
       wo: "",
       anmeldung: "",
       link: ""
   };

   const saved = localStorage.getItem(key);

   if(saved){
       data = JSON.parse(saved);
   }

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

   renderCell();

   cell.addEventListener("click", () => {

       const was = prompt("Was?", data.was);
       if(was === null) return;

       const wann = prompt("Wann?", data.wann);
       if(wann === null) return;

       const zielgruppe = prompt("Zielgruppe?", data.zielgruppe);
       if(zielgruppe === null) return;

       const wo = prompt("Wo?", data.wo);
       if(wo === null) return;

       const anmeldung = prompt("Anmeldung?", data.anmeldung);
       if(anmeldung === null) return;

       const link = prompt("Link?", data.link);
       if(link === null) return;

       data = {
           was,
           wann,
           zielgruppe,
           wo,
           anmeldung,
           link
       };

       localStorage.setItem(key, JSON.stringify(data));
       renderCell();
   });

   function renderCell() {

       cell.innerHTML = `
${day}
               ${data.was ? `Was: ${data.was}
` : ""}
               ${data.wann ? `Wann: ${data.wann}
` : ""}
               ${data.zielgruppe ? `Zielgruppe: ${data.zielgruppe}
` : ""}
               ${data.wo ? `Wo: ${data.wo}
` : ""}
               ${data.anmeldung ? `Anmeldung: ${data.anmeldung}
` : ""}
               ${data.link ? `Link: <a href="${data.link}" target="_blank">Öffnen</a>` : ""}

       `;
   }

   calendar.appendChild(cell);

}

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