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: | 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: | font-size: 16px; | ||
margin-bottom: 8px; | |||
} | } | ||
.note { | .note { | ||
font-size: | font-size: 12px; | ||
line-height: 1.4; | |||
} | |||
.note strong { | |||
display: block; | |||
margin-top: 5px; | |||
} | } | ||
</style> | </style> | ||
</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"]; | ||
]; | |||
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); | ||
} | } | ||
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> | <strong>Was:</strong> | ||
${data. | ${data.was || "-"} | ||
<strong> | <strong>Wann:</strong> | ||
${data. | ${data.wann || "-"} | ||
<strong> | <strong>Zielgruppe:</strong> | ||
${data. | ${data.zielgruppe || "-"} | ||
<strong> | <strong>Wo:</strong> | ||
${data. | ${data.wo || "-"} | ||
<strong> | <strong>Anmeldung:</strong> | ||
${data.anmeldung || "-"} | |||
<strong>Link:</strong> | |||
${ | ${ | ||
data.link | data.link | ||
| Zeile 107: | Zeile 120: | ||
: "-" | : "-" | ||
} | } | ||
</div> | </div> | ||
`; | `; | ||
} | } | ||
for (let day = 1; day <= 31; day++) { | for (let day = 1; day <= 31; day++) { | ||
| Zeile 131: | Zeile 144: | ||
); | ); | ||
const was = prompt("Was | const was = prompt("Was?", data.was || ""); | ||
if (was === null) return; | if (was === null) return; | ||
const wann = prompt("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
Klicke auf einen Tag, um einen Eintrag zu bearbeiten.
```