Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
```html
<!DOCTYPE html>
<html lang="de">
<html lang="de">
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Familienangebote August 2026</title>
<title>Familienangebote August 2026</title>


Zeile 25: Zeile 28:
     padding: 10px;
     padding: 10px;
     background: #f0f0f0;
     background: #f0f0f0;
    border: 1px solid #ddd;
}
}


.day {
.day {
     border: 1px solid #ccc;
     border: 1px solid #ccc;
     min-height: 120px;
     min-height: 280px;
     padding: 8px;
     padding: 8px;
     cursor: pointer;
     cursor: pointer;
     background: #fff;
     background: #fff;
     transition: 0.2s;
     transition: 0.2s;
    overflow-wrap: break-word;
}
}


Zeile 42: Zeile 47:
.day-number {
.day-number {
     font-weight: bold;
     font-weight: bold;
     margin-bottom: 5px;
    font-size: 16px;
     margin-bottom: 8px;
}
}


.note {
.note {
     font-size: 13px;
     font-size: 12px;
     white-space: pre-wrap;
     line-height: 1.4;
}
 
.note strong {
    display: block;
    margin-top: 5px;
}
}
</style>
</style>
</head>


</head>
<body>
<body>


<h2>Familienangebote – August 2026</h2>
<h2>Familienangebote – August 2026</h2>
<p>Klicke auf einen Tag, um einen Eintrag zu bearbeiten.</p>


<div class="calendar" id="calendar"></div>
<div class="calendar" id="calendar"></div>


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


const weekdays = [
const weekdays = ["Mo","Di","Mi","Do","Fr","Sa","So"];
    "Mo","Di","Mi","Do","Fr","Sa","So"
];


weekdays.forEach(day => {
weekdays.forEach(day => {
Zeile 76: Zeile 87:


// Leere Felder vor dem 1. August
// Leere Felder vor dem 1. August
for(let i = 0; i < firstDayOffset; i++){
for (let i = 0; i < firstDayOffset; i++) {
     const empty = document.createElement("div");
     const empty = document.createElement("div");
     calendar.appendChild(empty);
     calendar.appendChild(empty);
}
}
```javascript
 
function renderDay(cell, day, data) {
function renderDay(cell, day, data) {
     cell.innerHTML = `
     cell.innerHTML = `
         <div class="day-number">${day}</div>
         <div class="day-number">${day}</div>


         <div class="note">
         <div class="note">
            <strong>Was:</strong><br>
            ${data.was || "-"}<br><br>


             <strong>Wann:</strong><br>
             <strong>Was:</strong>
             ${data.wann || "-"}<br><br>
             ${data.was || "-"}


             <strong>Zielgruppe:</strong><br>
             <strong>Wann:</strong>
             ${data.zielgruppe || "-"}<br><br>
             ${data.wann || "-"}


             <strong>Wo:</strong><br>
             <strong>Zielgruppe:</strong>
             ${data.wo || "-"}<br><br>
             ${data.zielgruppe || "-"}


             <strong>Anmeldung:</strong><br>
             <strong>Wo:</strong>
             ${data.anmeldung || "-"}<br><br>
             ${data.wo || "-"}


             <strong>Link:</strong><br>
             <strong>Anmeldung:</strong>
            ${data.anmeldung || "-"}
 
            <strong>Link:</strong>
             ${
             ${
                 data.link
                 data.link
Zeile 107: Zeile 120:
                 : "-"
                 : "-"
             }
             }
         </div>
         </div>
     `;
     `;
}
}


// Tage erzeugen
for (let day = 1; day <= 31; day++) {
for (let day = 1; day <= 31; day++) {


Zeile 131: Zeile 144:
         );
         );


         const was = prompt("Was:", data.was || "");
         const was = prompt("Was?", data.was || "");
         if (was === null) return;
         if (was === null) return;


         const wann = prompt("Wann:", data.wann || "");
         const wann = prompt("Wann?", data.wann || "");
         if (wann === null) return;
         if (wann === null) return;


         const zielgruppe = prompt(
         const zielgruppe = prompt(
             "Zielgruppe:",
             "Zielgruppe?",
             data.zielgruppe || ""
             data.zielgruppe || ""
         );
         );
Zeile 144: Zeile 157:


         const wo = prompt(
         const wo = prompt(
             "Wo:",
             "Wo?",
             data.wo || ""
             data.wo || ""
         );
         );
Zeile 150: Zeile 163:


         const anmeldung = prompt(
         const anmeldung = prompt(
             "Anmeldung:",
             "Anmeldung?",
             data.anmeldung || ""
             data.anmeldung || ""
         );
         );
Zeile 156: Zeile 169:


         const link = prompt(
         const link = prompt(
             "Link:",
             "Link?",
             data.link || ""
             data.link || ""
         );
         );
Zeile 180: Zeile 193:
     calendar.appendChild(cell);
     calendar.appendChild(cell);
}
}
</script>
</body>
</html>
```

Version vom 9. Juni 2026, 09:10 Uhr

```html <!DOCTYPE html> Familienangebote August 2026

Familienangebote – August 2026

Klicke auf einen Tag, um einen Eintrag zu bearbeiten.

```