|
|
| Zeile 1: |
Zeile 1: |
| <html lang="de">
| | renderDayPreview(cell, day); |
| <head>
| |
| <meta charset="UTF-8">
| |
| <title>Familienangebote August 2026</title>
| |
|
| |
|
| <style>
| | cell.addEventListener("click", () => { |
| body {
| | openDay(day); |
| font-family: Arial, sans-serif;
| |
| margin: 20px;
| |
| }
| |
| | |
| h2 {
| |
| text-align: center;
| |
| }
| |
| | |
| .calendar {
| |
| display: grid;
| |
| grid-template-columns: repeat(7, 1fr);
| |
| gap: 8px;
| |
| }
| |
| | |
| .weekday {
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 10px;
| |
| background: #f0f0f0;
| |
| }
| |
| | |
| .day {
| |
| border: 1px solid #ccc;
| |
| min-height: 120px;
| |
| padding: 8px;
| |
| cursor: pointer;
| |
| background: #fff;
| |
| transition: 0.2s;
| |
| }
| |
| | |
| .day:hover {
| |
| background: #f8f8f8;
| |
| }
| |
| | |
| .day-number {
| |
| font-weight: bold;
| |
| margin-bottom: 5px;
| |
| }
| |
| | |
| .note {
| |
| font-size: 13px;
| |
| white-space: pre-wrap;
| |
| }
| |
| </style>
| |
| | |
| </head>
| |
| <body>
| |
| | |
| <h2>Familienangebote – August 2026</h2>
| |
| | |
| <div class="calendar" id="calendar"></div>
| |
| | |
| <script>
| |
| const calendar = document.getElementById("calendar");
| |
| | |
| const weekdays = [
| |
| "Mo","Di","Mi","Do","Fr","Sa","So"
| |
| ];
| |
| | |
| weekdays.forEach(day => {
| |
| const el = document.createElement("div"); | |
| el.className = "weekday";
| |
| el.textContent = day;
| |
| calendar.appendChild(el);
| |
| }); | | }); |
|
| |
| // August 2026 beginnt an einem Samstag
| |
| const firstDayOffset = 5;
| |
|
| |
| // Leere Felder vor dem 1. August
| |
| for(let i = 0; i < firstDayOffset; i++){
| |
| const empty = document.createElement("div");
| |
| calendar.appendChild(empty);
| |
| }
| |
|
| |
| // Tage erzeugen
| |
| for(let day = 1; day <= 31; day++) {
| |
|
| |
| const cell = document.createElement("div");
| |
| cell.className = "day";
| |
|
| |
| const key = "august2026_" + day;
| |
| const savedText = localStorage.getItem(key) || "";
| |
|
| |
| cell.innerHTML = `
| |
| <div class="day-number">${day}</div>
| |
| <div class="note">${savedText}</div>
| |
| `;
| |
|
| |
| cell.addEventListener("click", () => {
| |
| const current = localStorage.getItem(key) || "";
| |
| const text = prompt(
| |
| "Eintrag für den " + day + ". August 2026:",
| |
| current
| |
| );
| |
|
| |
| if(text !== null) {
| |
| localStorage.setItem(key, text);
| |
| cell.querySelector(".note").textContent = text;
| |
| }
| |
| });
| |
|
| |
| calendar.appendChild(cell);
| |
| }
| |
| </script>
| |
|
| |
|
| |
| </body>
| |
| </html>
| |
