Familienangebote im August: Unterschied zwischen den Versionen

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


<style>
<style>
body {
body{
     font-family: Arial, sans-serif;
     font-family: Arial, sans-serif;
     margin: 20px;
     margin:20px;
     background: #f5f5f5;
     background:#f5f5f5;
}
}


h1 {
h1{
     text-align: center;
     text-align:center;
}
}


.calendar {
.calendar{
     display: grid;
     display:grid;
     grid-template-columns: repeat(7, 1fr);
     grid-template-columns:repeat(7,1fr);
     gap: 10px;
     gap:10px;
}
}


.day-header {
.weekday{
     background: #2d6cdf;
     font-weight:bold;
    color: white;
     text-align:center;
     text-align: center;
     padding:10px;
     padding: 10px;
     background:#0077b6;
     font-weight: bold;
    color:white;
}
}


.day {
.day{
     background: white;
     background:white;
     min-height: 180px;
    border-radius:8px;
     border-radius: 8px;
     min-height:120px;
     padding: 8px;
     padding:8px;
     box-shadow: 0 1px 4px rgba(0,0,0,0.1);
     cursor:pointer;
     box-shadow:0 2px 4px rgba(0,0,0,.15);
}
}


.date {
.day:hover{
     font-weight: bold;
     background:#eef7ff;
    margin-bottom: 8px;
    color: #2d6cdf;
}
}


.event {
.day-number{
     border-left: 4px solid #2d6cdf;
     font-weight:bold;
    padding-left: 6px;
     margin-bottom:5px;
     margin-bottom: 10px;
    font-size: 13px;
}
}


.event strong {
.entry{
     display: inline-block;
    background:#e8f4ff;
     width: 85px;
    margin-top:4px;
    padding:4px;
    border-radius:4px;
    font-size:12px;
}
 
.modal{
     display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    justify-content:center;
     align-items:center;
}
 
.modal-content{
    background:white;
    padding:20px;
    width:500px;
    max-width:95%;
    border-radius:10px;
}
 
input, textarea{
    width:100%;
    margin-bottom:10px;
    padding:8px;
}
 
button{
    padding:8px 14px;
    margin-right:5px;
}
}
</style>
</style>
Zeile 64: Zeile 92:
<div class="calendar" id="calendar"></div>
<div class="calendar" id="calendar"></div>


<script>
<div class="modal" id="modal">
const events = {
    <div class="modal-content">
    3: [
        <h2 id="modalTitle"></h2>
         {
 
            angebot: "Baby-Café",
         <input id="angebot" placeholder="Angebot">
            uhrzeit: "09:00 - 11:00",
 
            zielgruppe: "Eltern mit Babys",
        <input id="uhrzeit" placeholder="Uhrzeit">
            anmeldung: "Nein",
 
            link: "https://beispiel.de"
        <input id="zielgruppe" placeholder="Zielgruppe">
        },
 
         {
        <input id="anmeldung" placeholder="Anmeldung">
            angebot: "Familientreff",
 
            uhrzeit: "15:00 - 17:00",
         <input id="link" placeholder="Link zum Angebot">
            zielgruppe: "Familien",
 
            anmeldung: "Ja",
        <button onclick="saveEntry()">Speichern</button>
            link: "https://beispiel.de"
        <button onclick="closeModal()">Schließen</button>
         }
 
    ],
         <hr>


    12: [
         <div id="existingEntries"></div>
         {
     </div>
            angebot: "Spielplatzaktion",
</div>
            uhrzeit: "14:00 - 17:00",
            zielgruppe: "Kinder 4-10 Jahre",
            anmeldung: "Nein",
            link: "https://beispiel.de"
        }
     ]
};


const calendar = document.getElementById("calendar");
<script>


const weekdays = [
const weekdays = [
     "Montag",
     "Mo","Di","Mi","Do","Fr","Sa","So"
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
    "Sonntag"
];
];


weekdays.forEach(day => {
const calendar = document.getElementById("calendar");
     const header = document.createElement("div");
 
     header.className = "day-header";
weekdays.forEach(day=>{
     header.textContent = day;
     const div=document.createElement("div");
     calendar.appendChild(header);
     div.className="weekday";
     div.textContent=day;
     calendar.appendChild(div);
});
});


// August 2026 beginnt an einem Samstag
// August 2026 beginnt an einem Samstag
const firstDayOffset = 5;
for(let i=0;i<5;i++){
    const empty=document.createElement("div");
    calendar.appendChild(empty);
}
 
for(let day=1; day<=31; day++){
 
    const div=document.createElement("div");
    div.className="day";
 
    div.innerHTML=`
        <div class="day-number">${day}</div>
        <div id="entries-${day}"></div>
    `;
 
    div.onclick=()=>openModal(day);
 
    calendar.appendChild(div);
}
 
let currentDay=null;
 
function getData(){
    return JSON.parse(localStorage.getItem("august2026")) || {};
}
 
function saveData(data){
    localStorage.setItem("august2026",JSON.stringify(data));
}
 
function openModal(day){
 
    currentDay=day;
 
    document.getElementById("modal").style.display="flex";
    document.getElementById("modalTitle").textContent=
        "Einträge für " + day + ". August 2026";


// Leere Felder vor dem 1. August
    renderEntries(day);
for (let i = 0; i < firstDayOffset; i++) {
}
     const empty = document.createElement("div");
 
    calendar.appendChild(empty);
function closeModal(){
     document.getElementById("modal").style.display="none";
}
}


for (let day = 1; day <= 31; day++) {
function saveEntry(){
     const dayBox = document.createElement("div");
 
     dayBox.className = "day";
    const angebot=document.getElementById("angebot").value;
    const uhrzeit=document.getElementById("uhrzeit").value;
    const zielgruppe=document.getElementById("zielgruppe").value;
     const anmeldung=document.getElementById("anmeldung").value;
     const link=document.getElementById("link").value;
 
    if(!angebot) return;


     let html = `<div class="date">${day}. August</div>`;
     const data=getData();


     if (events[day]) {
     if(!data[currentDay]){
         events[day].forEach(event => {
         data[currentDay]=[];
            html += `
                <div class="event">
                    <div><strong>Angebot:</strong> ${event.angebot}</div>
                    <div><strong>Uhrzeit:</strong> ${event.uhrzeit}</div>
                    <div><strong>Zielgruppe:</strong> ${event.zielgruppe}</div>
                    <div><strong>Anmeldung:</strong> ${event.anmeldung}</div>
                    <div><strong>Link:</strong>
                        <a href="${event.link}" target="_blank">Öffnen</a>
                    </div>
                </div>
            `;
        });
     }
     }


     dayBox.innerHTML = html;
     data[currentDay].push({
     calendar.appendChild(dayBox);
        angebot,
        uhrzeit,
        zielgruppe,
        anmeldung,
        link
    });
 
    saveData(data);
 
    document.getElementById("angebot").value="";
    document.getElementById("uhrzeit").value="";
    document.getElementById("zielgruppe").value="";
    document.getElementById("anmeldung").value="";
     document.getElementById("link").value="";
 
    renderEntries(currentDay);
    renderCalendar();
}
}
function deleteEntry(day,index){
    const data=getData();
    data[day].splice(index,1);
    saveData(data);
    renderEntries(day);
    renderCalendar();
}
function renderEntries(day){
    const data=getData();
    const container=document.getElementById("existingEntries");
    container.innerHTML="";
    if(!data[day]) return;
    data[day].forEach((entry,index)=>{
        container.innerHTML += `
            <div style="border:1px solid #ddd;padding:8px;margin-bottom:8px;">
                <strong>${entry.angebot}</strong><br>
                Uhrzeit: ${entry.uhrzeit}<br>
                Zielgruppe: ${entry.zielgruppe}<br>
                Anmeldung: ${entry.anmeldung}<br>
                <a href="${entry.link}" target="_blank">
                    Angebot öffnen
                </a><br><br>
                <button onclick="deleteEntry(${day},${index})">
                    Löschen
                </button>
            </div>
        `;
    });
}
function renderCalendar(){
    const data=getData();
    for(let day=1; day<=31; day++){
        const container=
            document.getElementById(`entries-${day}`);
        container.innerHTML="";
        if(data[day]){
            data[day].forEach(entry=>{
                const div=document.createElement("div");
                div.className="entry";
                div.textContent=
                    entry.uhrzeit + " - " + entry.angebot;
                container.appendChild(div);
            });
        }
    }
}
renderCalendar();
</script>
</script>


</body>
</body>
</html>
</html>

Version vom 9. Juni 2026, 09:36 Uhr

<!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=8347“