Skip to content

Instantly share code, notes, and snippets.

@soonix

soonix/kalender-poe-2024-12-10.html

Last active December 10, 2024 22:39
Show Gist options
  • Save soonix/67eb111a969e8598a0f750d3443f4589 to your computer and use it in GitHub Desktop.
Save soonix/67eb111a969e8598a0f750d3443f4589 to your computer and use it in GitHub Desktop.
Download ZIP
Jahres-Wochenkalender zum üben
Raw
kalender-poe-2024-12-10.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jahreskalender 2025</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.controls {
margin: 20px 0;
}
.moon-phase {
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="controls">
<label for="year">Jahr:</label>
<input type="number" id="year" value="2025" min="2024" max="2100">
<label for="weekStart">Wochenbeginn:</label>
<select id="weekStart">
<option value="1">Montag</option>
<option value="0">Sonntag</option>
</select>
<button onclick="generateCalendar()">Kalender erstellen</button>
</div>
<div id="calendar"></div>
<script>
function getFirstDayOfWeek(date, startDay) {
const day = date.getDay();
const diff = date.getDate() - day + (startDay === 0 ? 0 : (day === 0 ? -6 : 1));
return new Date(date.setDate(diff));
}
function getSeason(date) {
const month = date.getMonth();
const day = date.getDate();
if ((month === 11 && day >= 21) || month < 2 || (month === 2 && day < 20)) return "Winter";
if (month < 5 || (month === 5 && day < 21)) return "Frühling";
if (month < 8 || (month === 8 && day < 23)) return "Sommer";
if (month < 11 || (month === 11 && day < 21)) return "Herbst";
return "Winter";
}
function getZodiacSign(date) {
const month = date.getMonth();
const day = date.getDate();
if ((month === 0 && day >= 20) || (month === 1 && day <= 18)) return "Wassermann";
if ((month === 1 && day >= 19) || (month === 2 && day <= 20)) return "Fische";
if ((month === 2 && day >= 21) || (month === 3 && day <= 19)) return "Widder";
if ((month === 3 && day >= 20) || (month === 4 && day <= 20)) return "Stier";
if ((month === 4 && day >= 21) || (month === 5 && day <= 20)) return "Zwillinge";
if ((month === 5 && day >= 21) || (month === 6 && day <= 22)) return "Krebs";
if ((month === 6 && day >= 23) || (month === 7 && day <= 22)) return "Löwe";
if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "Jungfrau";
if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "Waage";
if ((month === 9 && day >= 23) || (month === 10 && day <= 21)) return "Skorpion";
if ((month === 10 && day >= 22) || (month === 11 && day <= 21)) return "Schütze";
return "Steinbock";
}
function getElement(zodiacSign) {
const elements = {
'Widder': 'Feuer', 'Löwe': 'Feuer', 'Schütze': 'Feuer',
'Stier': 'Erde', 'Jungfrau': 'Erde', 'Steinbock': 'Erde',
'Zwillinge': 'Luft', 'Waage': 'Luft', 'Wassermann': 'Luft',
'Krebs': 'Wasser', 'Skorpion': 'Wasser', 'Fische': 'Wasser'
};
return elements[zodiacSign];
}
function getMoonPhase(date) {
const phase = ((date - new Date(2000, 0, 6)) / (29.5305882 * 86400000)) % 1;
if (phase < 0.125) return "🌑";
if (phase < 0.375) return "🌒";
if (phase < 0.625) return "🌕";
if (phase < 0.875) return "🌘";
return "🌑";
}
function getGermanHolidays(year) {
const holidays = {
[new Date(year, 0, 1).toDateString()]: "Neujahr",
[new Date(2024, 3, 1).toDateString()]: "Ostermontag", // Beispieldatum
[new Date(2025, 3, 18).toDateString()]: "Karfreitag",
[new Date(2025, 3, 21).toDateString()]: "Ostermontag", // Beispieldatum
[new Date(2025, 4, 29).toDateString()]: "Christi Himmelfahrt",
[new Date(2025, 5, 9).toDateString()]: "Pfingstmontag",
[new Date(2025, 5, 19).toDateString()]: "Christi Himmelfahrt",
[new Date(year, 4, 1).toDateString()]: "Tag der Arbeit",
[new Date(year, 9, 3).toDateString()]: "Tag der Deutschen Einheit",
[new Date(year, 10, 1).toDateString()]: "Allerheiligen",
[new Date(year, 11, 25).toDateString()]: "1. Weihnachtstag",
[new Date(year, 11, 26).toDateString()]: "2. Weihnachtstag"
};
return holidays;
}
function generateCalendar() {
const year = parseInt(document.getElementById('year').value);
const weekStartDay = parseInt(document.getElementById('weekStart').value);
// Finde den ersten Tag des Jahres
let currentDate = new Date(year, 0, 1);
// Gehe zum ersten Tag der ersten Woche
currentDate = getFirstDayOfWeek(currentDate, weekStartDay);
let html = '<table><tr><th>KW</th><th>Datum</th><th>Jahreszeit</th><th>Tierkreis</th>' +
'<th>Element</th><th>Mondphase</th><th>Feiertage</th></tr>';
const holidays = getGermanHolidays(year);
while (currentDate.getFullYear() <= year) {
const weekNum = getWeekNumber(currentDate, weekStartDay);
const weekStart = new Date(currentDate);
const weekEnd = new Date(currentDate);
weekEnd.setDate(weekEnd.getDate() + 6);
// Überspringe Wochen des Vorjahres
if (weekStart.getFullYear() < year && weekEnd.getFullYear() < year) {
currentDate.setDate(currentDate.getDate() + 7);
continue;
}
// Beende die Schleife nach der letzten Woche des Jahres
if (weekStart.getFullYear() > year) {
break;
}
const dateRange = `${weekStart.getDate().toString().padStart(2, '0')}.${(weekStart.getMonth()+1).toString().padStart(2, '0')}. - ` +
`${weekEnd.getDate().toString().padStart(2, '0')}.${(weekEnd.getMonth()+1).toString().padStart(2, '0')}.`;
const holidaysInWeek = [];
for (let i = 0; i < 7; i++) {
const day = new Date(weekStart);
day.setDate(day.getDate() + i);
if (holidays[day.toDateString()]) {
holidaysInWeek.push(`${day.getDate()}.${day.getMonth()+1}.: ${holidays[day.toDateString()]}`);
}
}
html += `<tr>
<td>${weekNum}</td>
<td>${dateRange}</td>
<td>${getSeason(currentDate)}</td>
<td>${getZodiacSign(currentDate)}</td>
<td>${getElement(getZodiacSign(currentDate))}</td>
<td class="moon-phase">${getMoonPhase(currentDate)}</td>
<td>${holidaysInWeek.join(', ')}</td>
</tr>`;
currentDate.setDate(currentDate.getDate() + 7);
}
html += '</table>';
document.getElementById('calendar').innerHTML = html;
}
function getWeekNumber(d, startDay) {
const date = new Date(d.getTime());
date.setHours(0, 0, 0, 0);
// Donnerstag in dieser Woche entscheidet über das Jahr
date.setDate(date.getDate() + 3 - (date.getDay() + 7 - startDay) % 7);
const yearStart = new Date(date.getFullYear(), 0, 1);
const weekNo = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
return weekNo.toString().padStart(2, '0');
}
// Initial calendar generation
generateCalendar();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment