Familienangebote im August

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);

}