Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
(Der Seiteninhalt wurde durch einen anderen Text ersetzt: „renderDayPreview(cell, day); cell.addEventListener("click", () => { openDay(day); });“)
Markierung: Ersetzt
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
renderDayPreview(cell, day);
```javascript
const modal = document.getElementById("eventModal");
const closeBtn = document.querySelector(".close");


cell.addEventListener("click", () => {
let currentDay = null;
     openDay(day);
 
});
function getEvents(day){
    return JSON.parse(
        localStorage.getItem("august2026_" + day) || "[]"
    );
}
 
function saveEvents(day, events){
    localStorage.setItem(
        "august2026_" + day,
        JSON.stringify(events)
    );
}
 
function renderDayPreview(cell, day){
 
    const events = getEvents(day);
 
    cell.innerHTML = `
        <div class="day-number">${day}</div>
        <div class="note">
            ${events.length} Termin(e)
        </div>
    `;
}
 
function openDay(day){
 
    currentDay = day;
 
    document.getElementById("modalDate").innerText =
        day + ". August 2026";
 
    const events = getEvents(day);
 
    const list = document.getElementById("eventList");
 
    list.innerHTML = "";
 
    events.forEach((event,index)=>{
 
        list.innerHTML += `
            <div class="event-item">
 
                <h4>${event.was}</h4>
 
                <strong>Wann:</strong>
                ${event.wann}<br>
 
                <strong>Zielgruppe:</strong>
                ${event.zielgruppe}<br>
 
                <strong>Wo:</strong>
                ${event.wo}<br>
 
                <strong>Anmeldung:</strong>
                ${event.anmeldung}<br>
 
                <strong>Link:</strong>
                <a href="${event.link}" target="_blank">
                    öffnen
                </a><br>
 
                <strong>Beschreibung:</strong><br>
                ${event.beschreibung}<br><br>
 
                <button onclick="deleteEvent(${index})">
                    Löschen
                </button>
 
            </div>
        `;
    });
 
    modal.style.display = "block";
}
 
function saveEvent(){
 
    const events = getEvents(currentDay);
 
    events.push({
        was: document.getElementById("was").value,
        wann: document.getElementById("wann").value,
        zielgruppe: document.getElementById("zielgruppe").value,
        wo: document.getElementById("wo").value,
        anmeldung: document.getElementById("anmeldung").value,
        link: document.getElementById("link").value,
        beschreibung:
            document.getElementById("beschreibung").value
    });
 
    saveEvents(currentDay, events);
 
    openDay(currentDay);
 
    document.getElementById("was").value = "";
    document.getElementById("wann").value = "";
    document.getElementById("zielgruppe").value = "";
    document.getElementById("wo").value = "";
    document.getElementById("anmeldung").value = "";
    document.getElementById("link").value = "";
    document.getElementById("beschreibung").value = "";
 
    document.querySelectorAll(".day").forEach((cell,index)=>{
        if(index + 1 === currentDay){
            renderDayPreview(cell,currentDay);
        }
    });
}
 
function deleteEvent(index){
 
    const events = getEvents(currentDay);
 
    events.splice(index,1);
 
    saveEvents(currentDay,events);
 
     openDay(currentDay);
}
 
closeBtn.onclick = () => {
    modal.style.display = "none";
};
 
window.onclick = (e) => {
    if(e.target === modal){
        modal.style.display = "none";
    }
};
```

Version vom 9. Juni 2026, 09:31 Uhr

```javascript const modal = document.getElementById("eventModal"); const closeBtn = document.querySelector(".close");

let currentDay = null;

function getEvents(day){

   return JSON.parse(
       localStorage.getItem("august2026_" + day) || "[]"
   );

}

function saveEvents(day, events){

   localStorage.setItem(
       "august2026_" + day,
       JSON.stringify(events)
   );

}

function renderDayPreview(cell, day){

   const events = getEvents(day);
   cell.innerHTML = `
${day}
           ${events.length} Termin(e)
   `;

}

function openDay(day){

   currentDay = day;
   document.getElementById("modalDate").innerText =
       day + ". August 2026";
   const events = getEvents(day);
   const list = document.getElementById("eventList");
   list.innerHTML = "";
   events.forEach((event,index)=>{
       list.innerHTML += `

${event.was}

               Wann:
               ${event.wann}
               Zielgruppe:
               ${event.zielgruppe}
               Wo:
               ${event.wo}
               Anmeldung:
               ${event.anmeldung}
               Link:
               <a href="${event.link}" target="_blank">
                   öffnen
               </a>
               Beschreibung:
${event.beschreibung}

               <button onclick="deleteEvent(${index})">
                   Löschen
               </button>
       `;
   });
   modal.style.display = "block";

}

function saveEvent(){

   const events = getEvents(currentDay);
   events.push({
       was: document.getElementById("was").value,
       wann: document.getElementById("wann").value,
       zielgruppe: document.getElementById("zielgruppe").value,
       wo: document.getElementById("wo").value,
       anmeldung: document.getElementById("anmeldung").value,
       link: document.getElementById("link").value,
       beschreibung:
           document.getElementById("beschreibung").value
   });
   saveEvents(currentDay, events);
   openDay(currentDay);
   document.getElementById("was").value = "";
   document.getElementById("wann").value = "";
   document.getElementById("zielgruppe").value = "";
   document.getElementById("wo").value = "";
   document.getElementById("anmeldung").value = "";
   document.getElementById("link").value = "";
   document.getElementById("beschreibung").value = "";
   document.querySelectorAll(".day").forEach((cell,index)=>{
       if(index + 1 === currentDay){
           renderDayPreview(cell,currentDay);
       }
   });

}

function deleteEvent(index){

   const events = getEvents(currentDay);
   events.splice(index,1);
   saveEvents(currentDay,events);
   openDay(currentDay);

}

closeBtn.onclick = () => {

   modal.style.display = "none";

};

window.onclick = (e) => {

   if(e.target === modal){
       modal.style.display = "none";
   }

}; ```