←
Januar 2025
→
⋮
Notiz (optional):
<textarea id="dayNote" placeholder="Hier Notiz eingeben..."></textarea>
Farbe für diesen Tag (optional):
Speichern
Abbrechen
Notiz & Farbe löschen
<script>
// Globale Variablen
const weekdays = ['MO','DI','MI','DO','FR','SA','SO'];
let currentMonth = 0; // Januar
let currentYear = 2025;
let turnusPattern = ['A','F'];
let colorA = '#ff0000';
let colorF = '#00ff00';
let startDate = new Date('2025-01-01');
let dayNotes = {};
let customDayColors = {};
// Daten aus localStorage laden
function loadData() {
const storedNotes = localStorage.getItem('dayNotes');
const storedColors = localStorage.getItem('customDayColors');
const storedPattern = localStorage.getItem('turnusPattern');
const storedStart = localStorage.getItem('startDate');
const storedColorA = localStorage.getItem('colorA');
const storedColorF = localStorage.getItem('colorF');
if (storedNotes) dayNotes = JSON.parse(storedNotes);
if (storedColors) customDayColors = JSON.parse(storedColors);
if (storedPattern) turnusPattern = JSON.parse(storedPattern);
if (storedStart) startDate = new Date(storedStart);
if (storedColorA) colorA = storedColorA;
if (storedColorF) colorF = storedColorF;
}
loadData();
// Daten speichern
function saveData() {
localStorage.setItem('dayNotes', JSON.stringify(dayNotes));
localStorage.setItem('customDayColors', JSON.stringify(customDayColors));
localStorage.setItem('turnusPattern', JSON.stringify(turnusPattern));
localStorage.setItem('startDate', startDate.toISOString());
localStorage.setItem('colorA', colorA);
localStorage.setItem('colorF', colorF);
}
// Kalender aktualisieren
function updateCalendar() {
const calendar = document.getElementById('calendar');
const monthYearDisplay = document.getElementById('monthYear');
let monthDate = new Date(currentYear, currentMonth);
monthYearDisplay.textContent = monthDate.toLocaleString('de', { month: 'long' }) + ' ' + currentYear;
calendar.innerHTML = '';
let firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
firstDayIndex = (firstDayIndex + 6) % 7;
if (currentYear === 2025 && currentMonth === 0) {
firstDayIndex = 2; // Erzwinge: 1. Januar 2025 = Mittwoch
}
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
for (let i = 0; i < firstDayIndex; i++) {
const emptyDiv = document.createElement('div');
calendar.appendChild(emptyDiv);
}
for (let day = 1; day <= daysInMonth; day++) {
const dayDiv = document.createElement('div');
dayDiv.className = 'calendar-day';
dayDiv.dataset.day = day;
const weekdayAbbr = weekdays[(firstDayIndex + day - 1) % 7];
dayDiv.innerHTML = `
${weekdayAbbr}
${day}
`;
const dateKey = `${currentYear}-${(currentMonth+1).toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}`;
const thisDate = new Date(currentYear, currentMonth, day);
let diffDays = Math.floor((thisDate - startDate) / (1000*60*60*24));
if (diffDays >= 0) {
if (customDayColors[dateKey]) {
dayDiv.style.backgroundColor = customDayColors[dateKey];
dayDiv.style.color = '#fff';
} else {
let patternIndex = diffDays % turnusPattern.length;
let currentPattern = turnusPattern[patternIndex];
if (currentPattern === 'A') {
dayDiv.style.backgroundColor = colorA;
dayDiv.style.color = '#fff';
} else if (currentPattern === 'F') {
dayDiv.style.backgroundColor = colorF;
dayDiv.style.color = '#fff';
}
}
} else {
dayDiv.style.backgroundColor = '#fff';
dayDiv.style.color = '#000';
}
if (dayNotes[dateKey]) {
const infoIcon = document.createElement('div');
infoIcon.className = 'info-icon';
infoIcon.textContent = '•';
dayDiv.appendChild(infoIcon);
}
dayDiv.addEventListener('click', () => openDayModal(dateKey, dayDiv));
calendar.appendChild(dayDiv);
}
saveData();
}
function openDayModal(dateKey, dayDiv) {
const dayModal = document.getElementById('dayModal');
dayModal.classList.add('active');
dayModal.dataset.dateKey = dateKey;
document.getElementById('dayNote').value = dayNotes[dateKey] || '';
if (customDayColors[dateKey]) {
document.getElementById('dayColor').value = customDayColors[dateKey];
} else {
document.getElementById('dayColor').value = '#ffffff';
}
}
function closeDayModal() {
document.getElementById('dayModal').classList.remove('active');
}
document.getElementById('saveDay').addEventListener('click', () => {
const dayModal = document.getElementById('dayModal');
const dateKey = dayModal.dataset.dateKey;
const note = document.getElementById('dayNote').value;
const customColor = document.getElementById('dayColor').value;
if (note.trim() !== '') {
dayNotes[dateKey] = note;
} else {
delete dayNotes[dateKey];
}
if (customColor) {
customDayColors[dateKey] = customColor;
}
closeDayModal();
updateCalendar();
});
document.getElementById('cancelDay').addEventListener('click', () => {
closeDayModal();
});
document.getElementById('deleteDay').addEventListener('click', () => {
const dayModal = document.getElementById('dayModal');
const dateKey = dayModal.dataset.dateKey;
delete dayNotes[dateKey];
delete customDayColors[dateKey];
closeDayModal();
updateCalendar();
});
document.getElementById('settingsToggle').addEventListener('click', () => {
document.getElementById('settingsMenu').classList.toggle('active');
});
document.getElementById('applySettings').addEventListener('click', () => {
const startDateInput = document.getElementById('startDate').value;
const patternInput = document.getElementById('turnusPattern').value;
colorA = document.getElementById('colorA').value;
colorF = document.getElementById('colorF').value;
if (startDateInput) {
startDate = new Date(startDateInput);
}
if (patternInput) {
turnusPattern = patternInput.split(',').map(e => e.trim());
}
document.getElementById('settingsMenu').classList.remove('active');
updateCalendar();
});
document.getElementById('prevMonth').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
updateCalendar();
});
document.getElementById('nextMonth').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
updateCalendar();
});
// Homescreen: Klick auf Start wechselt zum Kalender-Screen mit Animation
document.getElementById('startButton').addEventListener('click', () => {
const homeScreen = document.getElementById('homeScreen');
homeScreen.style.animation = 'fadeOut 0.5s forwards';
setTimeout(() => {
homeScreen.style.display = 'none';
document.getElementById('calendarScreen').style.display = 'block';
updateCalendar();
}, 500);
});
updateCalendar();
</script>