Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 280: Zeile 280:


renderCalendar();
renderCalendar();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Familienangebote August 2026</title>
<style>
body{
    font-family:Arial,sans-serif;
    margin:20px;
    background:#f5f5f5;
}
h1{
    text-align:center;
}
.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
}
.day{
    background:white;
    min-height:180px;
    border-radius:10px;
    padding:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.15);
    cursor:pointer;
}
.day-number{
    font-weight:bold;
    margin-bottom:5px;
}
.entry{
    background:#e9f3ff;
    margin-top:5px;
    padding:4px;
    border-radius:4px;
    font-size:12px;
}
.weekday{
    text-align:center;
    font-weight:bold;
    padding:10px;
}
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
}
.modal-content{
    background:white;
    width:700px;
    max-width:95%;
    margin:30px auto;
    padding:20px;
    border-radius:10px;
    max-height:90vh;
    overflow:auto;
}
input,textarea{
    width:100%;
    margin-bottom:10px;
    padding:8px;
}
button{
    padding:10px;
    margin-right:5px;
}
.entry-list{
    margin-top:20px;
}
.saved-entry{
    border:1px solid #ddd;
    padding:10px;
    margin-bottom:10px;
}
</style>
</head>
<body>
<h1>Familienangebote August 2026</h1>
<div class="calendar" id="calendar"></div>
<div class="modal" id="modal">
<div class="modal-content">
<h2 id="modalDate"></h2>
<label>Angebot</label>
<input id="angebot">
<label>Uhrzeit</label>
<input id="uhrzeit">
<label>Treffpunkt/Ort</label>
<input id="ort">
<label>Zielgruppe</label>
<input id="zielgruppe">
<label>Anmeldung</label>
<input id="anmeldung">
<label>Link zum Angebot</label>
<input id="link">
<label>Beschreibung</label>
<textarea id="beschreibung"></textarea>
<label>Weitere Termine (durch Komma getrennt)</label>
<input id="weitereTermine" placeholder="05,12,19,26">
<button onclick="saveEntry()">Speichern</button>
<button onclick="closeModal()">Schließen</button>
<div class="entry-list" id="entryList"></div>
</div>
</div>
<script>
const year=2026;
const month=7;
let selectedDay=null;
const calendar=document.getElementById("calendar");
const weekdays=[
"Mo","Di","Mi","Do","Fr","Sa","So"
];
weekdays.forEach(w=>{
    const div=document.createElement("div");
    div.className="weekday";
    div.innerText=w;
    calendar.appendChild(div);
});
const daysInMonth=31;
for(let d=1;d<=daysInMonth;d++){
    const day=document.createElement("div");
    day.className="day";
    day.innerHTML=
    `<div class="day-number">${d}</div>
    <div id="entries-${d}"></div>`;
    day.onclick=()=>openDay(d);
    calendar.appendChild(day);
}
function loadData(){
    return JSON.parse(
        localStorage.getItem("august2026") || "{}"
    );
}
function saveData(data){
    localStorage.setItem(
        "august2026",
        JSON.stringify(data)
    );
}
function render(){
    const data=loadData();
    for(let d=1;d<=31;d++){
        const container=
        document.getElementById(`entries-${d}`);
        container.innerHTML="";
        (data[d]||[]).forEach(item=>{
            const div=document.createElement("div");
            div.className="entry";
            div.innerHTML=
            `<strong>${item.angebot}</strong><br>
            ${item.uhrzeit}`;
            container.appendChild(div);
        });
    }
}
function openDay(day){
    selectedDay=day;
    document.getElementById("modal").style.display="block";
    document.getElementById("modalDate").innerText=
    `Tag ${day}. August 2026`;
    showEntries(day);
}
function closeModal(){
    document.getElementById("modal").style.display="none";
}
function saveEntry(){
    const data=loadData();
    const entry={
        angebot:angebot.value,
        uhrzeit:uhrzeit.value,
        ort:ort.value,
        zielgruppe:zielgruppe.value,
        anmeldung:anmeldung.value,
        link:link.value,
        beschreibung:beschreibung.value
    };
    const tage=[selectedDay];
    if(weitereTermine.value.trim()){
        weitereTermine.value
        .split(",")
        .forEach(t=>{
            const n=parseInt(t.trim());
            if(n>=1 && n<=31){
                tage.push(n);
            }
        });
    }
    tage.forEach(tag=>{
        if(!data[tag]){
            data[tag]=[];
        }
        data[tag].push(entry);
    });
    saveData(data);
    render();
    showEntries(selectedDay);
    document.querySelectorAll("input,textarea")
    .forEach(f=>{
        if(f.id!=="weitereTermine"){
            f.value="";
        }
    });
    weitereTermine.value="";
}
function showEntries(day){
    const data=loadData();
    const list=document.getElementById("entryList");
    list.innerHTML="<h3>Vorhandene Einträge</h3>";
    (data[day]||[]).forEach((e,index)=>{
        const div=document.createElement("div");
        div.className="saved-entry";
        div.innerHTML=`
        <strong>${e.angebot}</strong><br>
        Uhrzeit: ${e.uhrzeit}<br>
        Ort: ${e.ort}<br>
        Zielgruppe: ${e.zielgruppe}<br>
        Anmeldung: ${e.anmeldung}<br>
        <a href="${e.link}" target="_blank">Link</a><br>
        ${e.beschreibung}<br><br>
        <button onclick="deleteEntry(${day},${index})">
        Löschen
        </button>
        `;
        list.appendChild(div);
    });
}
function deleteEntry(day,index){
    const data=loadData();
    data[day].splice(index,1);
    saveData(data);
    render();
    showEntries(day);
}
render();


</script>
</script>

Version vom 9. Juni 2026, 09:40 Uhr

<!DOCTYPE html> Familienangebote August 2026

Familienangebote August 2026


<!DOCTYPE html> Familienangebote August 2026

Familienangebote August 2026

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