Kalendarz w HTML, CSS, JS: stwórz interaktywną wersję krok po kroku

W tym artykule dowiesz się, jak krok po kroku zbudować w pełni funkcjonalny i interaktywny kalendarz na swoją stronę internetową, wykorzystując HTML, CSS i JavaScript. Poznasz praktyczne rozwiązania i fragmenty kodu, które pozwolą Ci stworzyć własny, dynamiczny kalendarz.

W sekcji `` umieszczamy nagłówki dni tygodnia. Pamiętaj, aby uwzględnić polską kolejność, gdzie poniedziałek jest pierwszym dniem tygodnia. Używamy do tego znacznika `` (table header). W moim przykładzie zastosowałem skrócone nazwy, ale możesz użyć pełnych, jeśli wolisz. To właśnie ta sekcja będzie stała i niezmienna, niezależnie od wyświetlanego miesiąca.

  Pon Wt Śr Czw Pt Sob Nd 

Na koniec, sekcja `

Krok 2: ożywiamy kalendarz, czyli podstawy stylizacji w CSS

Mając już szkielet HTML, czas nadać naszemu kalendarzowi wygląd. Dobra stylizacja jest kluczowa dla czytelności i użyteczności. Zaczynamy od podstawowych właściwości CSS, które określą ogólny wygląd kontenera, tabeli i komórek. Używam `width` do kontroli rozmiaru, `border` do obramowań, `padding` dla odstępów, `text-align` do wyrównania tekstu i `font-size` dla czytelności. Pamiętaj, aby style były spójne i estetyczne.

#calendar-container { width: 300px; margin: 20px auto; font-family: Arial, sans-serif; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background-color: #fff; padding: 15px;
} .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
} .calendar-header h2 { margin: 0; font-size: 1.2em; color: #333;
} .calendar-header button { background-color: #007bff; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease;
} .calendar-header button:hover { background-color: #0056b3;
} #calendar { width: 100%; border-collapse: collapse; text-align: center;
} #calendar th, #calendar td { padding: 10px; border: 1px solid #eee; font-size: 0.9em;
} #calendar th { background-color: #f2f2f2; color: #555; font-weight: bold;
}

Aby kalendarz był bardziej intuicyjny, warto wyróżnić aktualny dzień oraz dni weekendowe. Używam do tego klas CSS, takich jak `.today`, `.weekend`, `.saturday` i `.sunday`. Zmieniając ich tło, kolor tekstu lub obramowanie, natychmiast zwracamy uwagę użytkownika na ważne daty. To prosta, ale bardzo efektywna technika poprawiająca UX.

#calendar td.today { background-color: #007bff; color: white; border-radius: 50%; font-weight: bold;
} #calendar td.weekend { color: #dc3545; /* Czerwony kolor dla weekendów */
} #calendar td.saturday { background-color: #f8d7da; /* Jasnoczerwone tło dla soboty */
} #calendar td.sunday { background-color: #f8d7da; /* Jasnoczerwone tło dla niedzieli */
} #calendar td.empty { background-color: #f9f9f9; color: #ccc;
}

W dzisiejszych czasach responsywność jest absolutną koniecznością. Kalendarz musi dobrze wyglądać i działać na każdym urządzeniu. Wprowadzam podstawy responsywnego projektowania (RWD) za pomocą `media queries`. Pozwalają mi one dostosować style kalendarza na przykład rozmiary czcionek, marginesy czy szerokość w zależności od szerokości ekranu. Dzięki temu kalendarz będzie czytelny zarówno na dużym monitorze, jak i na smartfonie.

@media (max-width: 600px) { #calendar-container { width: 95%; padding: 10px; } #calendar th, #calendar td { padding: 8px; font-size: 0.8em; } .calendar-header h2 { font-size: 1em; } .calendar-header button { padding: 6px 10px; font-size: 0.9em; }
}

Krok 3: mózg operacji dynamiczne generowanie kalendarza w JavaScript

Staticzny kalendarz HTML to tylko siatka. Prawdziwa magia dzieje się w JavaScript. Na początek, używamy obiektu `new Date()` w JavaScript do pobrania bieżącego roku, miesiąca i dnia. Te informacje są punktem wyjścia dla naszego kalendarza. Będą one wykorzystywane do inicjalizacji kalendarza, czyli do wyświetlenia aktualnego miesiąca i roku po załadowaniu strony.

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();
const today = new Date();

Następnie tworzymy główną funkcję JavaScript, którą nazwałem `renderCalendar(year, month)`. To ona będzie odpowiedzialna za generowanie całego widoku kalendarza dla podanego miesiąca i roku. Wewnątrz tej funkcji musimy obliczyć liczbę dni w danym miesiącu (np. za pomocą `new Date(year, month + 1, 0).getDate()`) oraz pierwszy dzień tygodnia dla tego miesiąca (`new Date(year, month, 1).getDay()`). Te dwie wartości są fundamentem do prawidłowego ułożenia dni w siatce kalendarza.

const monthYearLabel = document.getElementById('monthYear');
const calendarBody = document.getElementById('calendar-body');
const months = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień']; function renderCalendar(year, month) { calendarBody.innerHTML = ''; // Czyścimy poprzednie dni monthYearLabel.textContent = `${months[month]} ${year}`; const firstDayOfMonth = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); let date = 1; for (let i = 0; i < 6; i++) { // Maksymalnie 6 wierszy dla dni const row = document.createElement('tr'); // Tworzymy komórki for (let j = 0; j < 7; j++) { const cell = document.createElement('td'); // Logika dodawania pustych komórek i dni miesiąca // ... (będzie w kolejnych krokach) row.appendChild(cell); } calendarBody.appendChild(row); }
}

Jednym z kluczowych momentów jest prawidłowe obliczenie i dodanie pustych komórek na początku miesiąca, jeśli pierwszy dzień nie przypada na poniedziałek. Tutaj pojawia się ważna kwestia: konieczność korekty wartości zwracanej przez `getDay()` dla polskiej lokalizacji. Domyślnie `getDay()` zwraca 0 dla niedzieli, 1 dla poniedziałku itd. W Polsce tydzień zaczyna się od poniedziałku, więc musimy przeliczyć tę wartość. Moja sprawdzona metoda to `(firstDayOfMonth + 6) % 7`. Dzięki temu poniedziałek zawsze będzie miał indeks 0, wtorek 1 itd., a niedziela 6.

function renderCalendar(year, month) { // ... (poprzedni kod) const firstDayOfMonth = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); // Korekta dla polskiej lokalizacji: poniedziałek to 0, niedziela to 6 const startDayIndex = (firstDayOfMonth === 0) ? 6 : firstDayOfMonth - 1; let date = 1; for (let i = 0; i < 6; i++) { const row = document.createElement('tr'); for (let j = 0; j < 7; j++) { const cell = document.createElement('td'); if (i === 0 && j < startDayIndex) { // Puste komórki na początku miesiąca cell.classList.add('empty'); cell.textContent = ''; } else if (date > daysInMonth) { // Puste komórki na końcu miesiąca cell.classList.add('empty'); cell.textContent = ''; } else { // Dni miesiąca cell.textContent = date; // ... (dodawanie klas .today, .weekend) date++; } row.appendChild(cell); } calendarBody.appendChild(row); if (date > daysInMonth) break; // Przerwij pętlę, jeśli wszystkie dni zostały dodane }
}

Wreszcie, za pomocą pętli (zazwyczaj `for`) dynamicznie tworzymy elementy `

function renderCalendar(year, month) { // ... (poprzedni kod) let date = 1; for (let i = 0; i < 6; i++) { const row = document.createElement('tr'); for (let j = 0; j < 7; j++) { const cell = document.createElement('td'); if (i === 0 && j < startDayIndex) { cell.classList.add('empty'); cell.textContent = ''; } else if (date > daysInMonth) { cell.classList.add('empty'); cell.textContent = ''; } else { cell.textContent = date; // Dodajemy klasę 'weekend' dla soboty (indeks 5) i niedzieli (indeks 6) if (j === 5 || j === 6) { cell.classList.add('weekend'); } // Sprawdzamy, czy to dzisiejszy dzień if (date === today.getDate() && month === today.getMonth() && year === today.getFullYear()) { cell.classList.add('today'); } date++; } row.appendChild(cell); } calendarBody.appendChild(row); if (date > daysInMonth) break; }
} // Inicjalizacja kalendarza po załadowaniu strony
document.addEventListener('DOMContentLoaded', () => { renderCalendar(currentYear, currentMonth);
});

 < 
 >

const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn'); prevBtn.addEventListener('click', () => { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(currentYear, currentMonth);
}); nextBtn.addEventListener('click', () => { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } renderCalendar(currentYear, currentMonth);
});

const months = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
const monthYearLabel = document.getElementById('monthYear'); function renderCalendar(year, month) { // ... monthYearLabel.textContent = `${months[month]} ${year}`; // ...
}

function renderCalendar(year, month) { // ... let date = 1; for (let i = 0; i < 6; i++) { const row = document.createElement('tr'); for (let j = 0; j < 7; j++) { const cell = document.createElement('td'); // ... (logika pustych komórek) else { cell.textContent = date; if (j === 5 || j === 6) { // Sobota i Niedziela cell.classList.add('weekend'); } // Sprawdzamy, czy to dzisiejszy dzień TYLKO w bieżącym miesiącu i roku if (date === today.getDate() && month === today.getMonth() && year === today.getFullYear()) { cell.classList.add('today'); } date++; } row.appendChild(cell); } calendarBody.appendChild(row); if (date > daysInMonth) break; }
}

// firstDayOfMonth z new Date(year, month, 1).getDay()
const firstDayOfMonth = new Date(year, month, 1).getDay(); // Korekta: 0 (niedziela) staje się 6, 1 (poniedziałek) staje się 0 itd.
const startDayIndex = (firstDayOfMonth === 0) ? 6 : firstDayOfMonth - 1;