Przejdź do głównej zawartości
Codex13

11. Planer wydarzeń

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację kalendarza z widokiem miesięcznym, możliwością dodawania wydarzeń do konkretnych dni i przeglądaniem nadchodzących wydarzeń.

Czego się nauczycie?

  • Intensywna praca z datami w JavaScript
  • Budowanie siatki kalendarza od zera (7 kolumn × N wierszy)
  • Zarządzanie zdarzeniami powiązanymi z datami
  • Nawigacja między miesiącami
  • Praca zespołowa — jeden buduje siatkę kalendarza, drugi formularz wydarzeń i widok listy

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Widok miesięczny — siatka kalendarza z dniem tygodnia, numerami dni

  2. Nawigacja — przełączanie miesięcy (poprzedni / następny)

  3. Dodawanie wydarzeń — kliknięcie dnia otwiera formularz z nazwą, godziną, opisem

  4. Widok dnia — lista wydarzeń dla wybranego dnia

  5. Lista nadchodzących — co jest zaplanowane w ciągu najbliższych 7 dni

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "events": [
    {
      "id": "evt-001",
      "title": "Oddanie projektu ZAW",
      "date": "2025-03-20",
      "time": "23:59",
      "description": "Deadline projektu grupowego",
      "color": "#ef4444",
      "category": "deadline"
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Widok miesięczny z siatką dni
  • Nawigacja między miesiącami
  • Dodawanie wydarzeń z tytułem i datą
  • Wyświetlenie wydarzeń w komórkach kalendarza (do 2-3 na dzień)
  • Zapis w localStorage
  • Foldersrc/
    • Foldercomponents/
      • CalendarGrid.jsx
      • CalendarDay.jsx
      • EventBadge.jsx
      • EventForm.jsx
    • Folderutils/
      • calendarUtils.js
 Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Generowanie siatki kalendarza

Dział zatytułowany „Generowanie siatki kalendarza”
src/utils/calendarUtils.js
export function generateCalendarDays(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);


  // Dzień tygodnia pierwszego dnia (0=niedz, 1=pon, ...)
  // Dostosowanie dla europejskiego kalendarza (pon = 0)
  const startOffset = (firstDay.getDay() + 6) % 7;


  const days = [];


  // Puste komórki na początku
  for (let i = 0; i < startOffset; i++) {
    days.push(null);
  }


  // Dni miesiąca
  for (let d = 1; d <= lastDay.getDate(); d++) {
    days.push(new Date(year, month, d));
  }


  return days;
}


export function isSameDay(date1, date2) {
  return (
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate()
  );
}


export function isToday(date) {
  return isSameDay(date, new Date());
}

Zasoby

Dział zatytułowany „Zasoby”
Date — MDN Praca z datami — getDay, getDate, getMonth.
CSS Grid Siatka 7 kolumn dla kalendarza.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Planer wydarzeń to jedno z trudniejszych zadań — praca z datami w JS wymaga dużo cierpliwości. Generowanie siatki kalendarza jest najtrudniejszą częścią — zacznijcie od niej i testujcie każdy miesiąc!