Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div id="familienangebote-august"></div>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Familienangebote August 2026</title>
 
<style>
body{
    font-family: Arial, sans-serif;
    margin:20px;
    background:#f5f5f5;
}
 
h1{
    text-align:center;
}
 
.toolbar{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    justify-content:center;
}
 
button{
    cursor:pointer;
}
 
.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
}
 
.weekday{
    background:#003366;
    color:white;
    padding:10px;
    text-align:center;
    font-weight:bold;
}
 
.day{
    background:white;
    min-height:150px;
    border-radius:8px;
    padding:8px;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    cursor:pointer;
}
 
.day-number{
    font-weight:bold;
    margin-bottom:8px;
}
 
.entry{
    background:#e8f2ff;
    padding:4px;
    margin-bottom: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;
    width:90%;
    max-width:900px;
    max-height:90vh;
    overflow:auto;
    padding:20px;
    border-radius:10px;
}
 
label{
    display:block;
    margin-top:10px;
    font-weight:bold;
}
 
input, textarea{
    width:100%;
    padding:8px;
    box-sizing:border-box;
}
 
.entry-card{
    border:1px solid #ccc;
    padding:10px;
    margin:10px 0;
    border-radius:6px;
}
 
.actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}
 
.close-btn{
    float:right;
}
 
.empty{
    background:transparent;
}
</style>
</head>
<body>
 
<h1>Familienangebote – August 2026</h1>
 
<div class="toolbar">
    <button onclick="exportData()">Export JSON</button>
    <button onclick="exportPDF()">Export PDF</button>
    <button onclick="exportExcel()">Export Excel</button>
 
    <input type="file" id="importFile" onchange="importData(event)">
</div>
 
<div class="calendar" id="calendar"></div>
 
<div class="modal" id="modal">
    <div class="modal-content">
 
        <button class="close-btn" onclick="closeModal()">Schließen</button>
 
        <h2 id="modalDate"></h2>
 
        <button onclick="addEntry()">+ Neuer Eintrag</button>
 
        <div id="entriesContainer"></div>
 
    </div>
</div>


<script>
<script>
const data = {


let data = {
   "1": [
   "1": [
     {
     {
Zeile 259: Zeile 402:
};
};


const root = document.getElementById("familienangebote-august");
let selectedDay = null;


root.innerHTML = `
function saveData() {
<style>
     renderCalendar();
.fa-calendar{
     display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    font-family:Arial,sans-serif;
}
}


.fa-weekday{
const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
     background:#003366;
 
     color:#fff;
 
     padding:10px;
function renderCalendar(){
     text-align:center;
 
     font-weight:bold;
    const cal = document.getElementById("calendar");
    cal.innerHTML = "";
 
    weekdays.forEach(day=>{
        const div = document.createElement("div");
        div.className = "weekday";
        div.textContent = day;
        cal.appendChild(div);
    });
 
     const firstDay = new Date(2026,7,1);
 
     let offset = firstDay.getDay();
     offset = offset === 0 ? 6 : offset - 1;
 
     for(let i=0;i<offset;i++){
        const empty = document.createElement("div");
        empty.className = "empty";
        cal.appendChild(empty);
     }
 
    for(let day=1; day<=31; day++){
 
        const div = document.createElement("div");
        div.className = "day";
 
        div.onclick = () => openDay(day);
 
        const dayNumber = document.createElement("div");
        dayNumber.className = "day-number";
        dayNumber.textContent = day;
 
        div.appendChild(dayNumber);
 
        const entries = data[day] || [];
 
        entries.forEach(entry=>{
            const e = document.createElement("div");
            e.className = "entry";
            e.textContent = entry.angebot || "(ohne Titel)";
            div.appendChild(e);
        });
 
        cal.appendChild(div);
    }
}
}


.fa-day{
function openDay(day){
     background:#fff;
 
     border:1px solid #ddd;
     selectedDay = day;
     border-radius:6px;
 
    min-height:120px;
     document.getElementById("modal").style.display="flex";
    padding:8px;
     document.getElementById("modalDate").textContent =
     box-shadow:0 2px 4px rgba(0,0,0,.08);
        `Samstag, ${day}. August 2026`.replace("Samstag", new Date(2026,7,day)
        .toLocaleDateString("de-DE",{weekday:"long"}));
 
     renderEntries();
}
}


.fa-number{
function closeModal(){
     font-weight:bold;
     document.getElementById("modal").style.display="none";
    margin-bottom:8px;
}
}


.fa-entry{
function renderEntries(){
     background:#e8f2ff;
 
     padding:4px;
     const container = document.getElementById("entriesContainer");
     margin-bottom:4px;
     container.innerHTML = "";
     border-radius:4px;
 
    font-size:12px;
     if(!data[selectedDay]){
}
        data[selectedDay] = [];
     }
 
    data[selectedDay].forEach((entry,index)=>{
 
        const card = document.createElement("div");
        card.className = "entry-card";
 
        card.innerHTML = `
            <label>Angebot</label>
            <input value="${entry.angebot || ''}" onchange="updateField(${index},'angebot',this.value)">
 
            <label>Uhrzeit</label>
            <input value="${entry.uhrzeit || ''}" onchange="updateField(${index},'uhrzeit',this.value)">
 
            <label>Treffpunkt/Ort</label>
            <input value="${entry.ort || ''}" onchange="updateField(${index},'ort',this.value)">


.fa-modal{
            <label>Zielgruppe</label>
    display:none;
            <input value="${entry.zielgruppe || ''}" onchange="updateField(${index},'zielgruppe',this.value)">
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    justify-content:center;
    align-items:center;
    z-index:9999;
}


.fa-modal-content{
            <label>Anmeldung</label>
    background:#fff;
            <input value="${entry.anmeldung || ''}" onchange="updateField(${index},'anmeldung',this.value)">
    width:90%;
    max-width:900px;
    max-height:90vh;
    overflow:auto;
    padding:20px;
    border-radius:8px;
}


.fa-close{
            <label>Link zum Angebot</label>
    float:right;
            <input value="${entry.link || ''}" onchange="updateField(${index},'link',this.value)">
}
</style>


<h2>Familienangebote August 2026</h2>
            <label>Beschreibung</label>
            <textarea rows="4" onchange="updateField(${index},'beschreibung',this.value)">${entry.beschreibung || ''}</textarea>


<div class="fa-calendar" id="fa-calendar"></div>
          <div class="actions">
    <button onclick="copyEntryToDate(${index})">
        Auf anderes Datum kopieren
    </button>


<div class="fa-modal" id="fa-modal">
    <button onclick="deleteEntry(${index})">
  <div class="fa-modal-content">
        Löschen
      <button class="fa-close" onclick="closeFaModal()">Schließen</button>
    </button>
      <h3 id="fa-title"></h3>
      <div id="fa-content"></div>
  </div>
</div>
</div>
`;
        `;


const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
        container.appendChild(card);
const calendar = document.getElementById("fa-calendar");
    });
}
function copyEntryToDate(index){
 
    const targetDay = prompt(
        "Auf welchen Tag im August kopieren? (1-31)"
    );


weekdays.forEach(d=>{
     if(!targetDay) return;
     const el=document.createElement("div");
    el.className="fa-weekday";
    el.textContent=d;
    calendar.appendChild(el);
});


const firstDay=new Date(2026,7,1);
    const day = parseInt(targetDay);
let offset=firstDay.getDay();
offset=offset===0?6:offset-1;


for(let i=0;i<offset;i++){
    if(day < 1 || day > 31){
    const empty=document.createElement("div");
        alert("Ungültiger Tag.");
    calendar.appendChild(empty);
        return;
}
    }


for(let day=1;day<=31;day++){
    if(!data[day]){
        data[day] = [];
    }


     const cell=document.createElement("div");
     const copy = JSON.parse(
     cell.className="fa-day";
        JSON.stringify(data[selectedDay][index])
     );


     const number=document.createElement("div");
     data[day].push(copy);
    number.className="fa-number";
    number.textContent=day;


     cell.appendChild(number);
     saveData();


     const entries=data[day]||[];
     alert(
        "Termin wurde auf den "
        + day +
        ". August kopiert."
    );
}
function addEntry(){


     entries.forEach(entry=>{
     data[selectedDay].push({
         const div=document.createElement("div");
         angebot:"",
         div.className="fa-entry";
        uhrzeit:"",
         div.textContent=entry.angebot;
        ort:"",
         cell.appendChild(div);
        zielgruppe:"",
         anmeldung:"",
         link:"",
         beschreibung:""
     });
     });


     cell.onclick=()=>showDay(day);
     saveData();
    renderEntries();
}
 
function updateField(index, field, value){


     calendar.appendChild(cell);
     data[selectedDay][index][field] = value;
 
    saveData();
}
}


function showDay(day){
function deleteEntry(index){


     const entries=data[day]||[];
     if(confirm("Eintrag löschen?")){


    document.getElementById("fa-title").textContent=
        data[selectedDay].splice(index,1);
        day + ". August 2026";


     let html="";
        saveData();
        renderEntries();
     }
}


    entries.forEach(entry=>{
function copyEntry(index){


        html+=`
    const copy = JSON.parse(
         <div style="border:1px solid #ddd;padding:10px;margin-bottom:10px;border-radius:6px;">
         JSON.stringify(data[selectedDay][index])
            <h4>${entry.angebot||""}</h4>
    );


            <p><b>Uhrzeit:</b> ${entry.uhrzeit||""}</p>
    data[selectedDay].push(copy);
            <p><b>Ort:</b> ${entry.ort||""}</p>
            <p><b>Zielgruppe:</b> ${entry.zielgruppe||""}</p>
            <p><b>Anmeldung:</b> ${entry.anmeldung||""}</p>


            ${
    saveData();
                entry.link
    renderEntries();
                ? `<p><a href="${entry.link}" target="_blank">Weitere Informationen</a></p>`
}
                : ""
            }


            <p>${entry.beschreibung||""}</p>
function exportData(){
        </div>
        `;
    });


     if(entries.length===0){
     const blob = new Blob(
         html="<p>Keine Einträge vorhanden.</p>";
        [JSON.stringify(data,null,2)],
     }
         {type:"application/json"}
     );


     document.getElementById("fa-content").innerHTML=html;
     const a = document.createElement("a");
     document.getElementById("fa-modal").style.display="flex";
     a.href = URL.createObjectURL(blob);
    a.download = "familienangebote_august_2026.json";
    a.click();
}
}


function closeFaModal(){
function importData(event){
     document.getElementById("fa-modal").style.display="none";
 
     const file = event.target.files[0];
    if(!file) return;
 
    const reader = new FileReader();
 
    reader.onload = e => {
 
        data = JSON.parse(e.target.result);
 
        saveData();
 
        alert("Import erfolgreich.");
    };
 
    reader.readAsText(file);
}
}
renderCalendar();
</script>
</script>
</body>
</html>

Version vom 10. Juni 2026, 09:37 Uhr

Familienangebote August 2026

Familienangebote – August 2026

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