Przejdź do głównej zawartości

10. Mini-kalendarz z wydarzeniami

Mniejsza wersja planera wydarzeń — siatka kalendarza miesięcznego, kliknięcie dnia → formularz wydarzenia, wyświetlanie wydarzeń w komórkach.

// Generowanie dni miesiąca
function getDaysInMonth(year, month) {
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startOffset = (firstDay.getDay() + 6) % 7; // Pon = 0
const days = [];
for (let i = 0; i < startOffset; i++) days.push(null);
for (let d = 1; d <= lastDay.getDate(); d++) {
days.push(new Date(year, month, d));
}
return days;
}
  • Siatka kalendarza z navegacją miesięcy
  • Dodawanie wydarzeń przez kliknięcie dnia
  • Wyświetlanie nazw wydarzeń w komórkach
  • Zapis w localStorage
  • Wyróżnienie dzisiejszego dnia
Ocena: 3.0

Powodzenia!

Siatka kalendarza jest najtrudniejszą częścią — zanim zaczniesz kodować, zrozum jak działa getDay() i dlaczego europejski tydzień zaczyna się od poniedziałka (a nie niedzieli jak w JS domyślnie). Formuła (firstDay.getDay() + 6) % 7 rozwiązuje ten problem!