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: | ||
```javascript | |||
const modal = document.getElementById("eventModal"); | |||
const closeBtn = document.querySelector(".close"); | |||
cell. | let currentDay = null; | ||
openDay( | |||
}); | 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";
}
}; ```