Kalendarz w HTML, CSS, JS: Stwórz interaktywny krok po kroku!

 
 <  > 
 
 

w połączeniu z CSS Grid lub Flexbox jest często rekomendowanym podejściem. CSS Grid jest wręcz stworzony do układów dwuwymiarowych, takich jak siatka dni w kalendarzu, dając nam znacznie większą kontrolę nad układem i zachowaniem na różnych ekranach niż sztywna struktura tabeli. Stworzymy dwa kontenery: jeden na nazwy dni tygodnia, a drugi na dynamicznie generowane daty. Krok 2: Ożywiamy szkielet dynamiczne generowanie kalendarza z JavaScript Teraz, gdy mamy już solidną strukturę HTML, nadszedł czas, aby ożywić nasz kalendarz za pomocą JavaScriptu. To właśnie JS będzie odpowiedzialny za całą dynamikę: generowanie dni miesiąca, obsługę nawigacji, wyróżnianie aktualnej daty i wszelkie inne interakcje. To serce naszego projektu, które sprawi, że kalendarz stanie się w pełni funkcjonalnym narzędziem. Praca z datami w JS: Jak wykorzystać obiekt `Date` do naszych celów? Obiekt Date w JavaScript jest fundamentalny do wszystkich operacji na datach w naszym kalendarzu. Pozwala nam pobierać aktualną datę, ustawiać konkretny miesiąc i rok, a także uzyskiwać kluczowe informacje, takie jak dzień tygodnia pierwszego dnia miesiąca czy liczba dni w danym miesiącu. // Pobieranie aktualnej daty const today = new Date(); console.log(today); // np. Tue Oct 26 2023 ... // Ustawienie konkretnego miesiąca/roku (miesiące są liczone od 0 do 11) let currentMonth = today.getMonth(); // 0 dla stycznia, 9 dla października let currentYear = today.getFullYear(); // Pobranie pierwszego dnia miesiąca (dzień tygodnia, 0=niedziela, 1=poniedziałek) const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay(); console.log(firstDayOfMonth); // np. 2 dla wtorku // Pobranie liczby dni w miesiącu (ustawiamy dzień 0 następnego miesiąca) const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); console.log(daysInMonth); // np. 31 dla października Funkcja renderująca: Logika tworzenia siatki dni dla dowolnego miesiąca i roku Główną funkcją, którą stworzymy, będzie ta odpowiedzialna za generowanie całej siatki dni kalendarza. Będzie ona przyjmować rok i miesiąc jako parametry, a następnie dynamicznie tworzyć elementy DOM reprezentujące poszczególne dni. To tutaj będzie się dziać cała magia. Warto wspomnieć, że przy dynamicznym tworzeniu wielu elementów DOM, dobrym zwyczajem jest użycie DocumentFragment. Pozwala to na zbudowanie całej struktury kalendarza w pamięci, a następnie jednorazowe wstawienie jej do drzewa DOM, co znacząco poprawia wydajność, zwłaszcza przy częstym przełączaniu miesięcy. DocumentFragment dla wydajności: Obiekt DocumentFragment to lekki kontener, który służy do przechowywania węzłów DOM. Pozwala on na budowanie złożonych struktur w pamięci, a następnie wstawienie ich do dokumentu za pomocą jednej operacji. Zmniejsza to liczbę kosztownych reflowów i repaintów przeglądarki, co przekłada się na płynniejsze działanie interfejsu. function renderCalendar(year, month) { const daysGrid = document.getElementById('days-grid'); daysGrid.innerHTML = ''; // Czyścimy poprzednie dni const monthDisplay = document.getElementById('monthDisplay'); const date = new Date(year, month); monthDisplay.textContent = date.toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' }); const firstDayOfMonth = new Date(year, month, 1).getDay(); // 0 = niedziela, 1 = poniedziałek const daysInMonth = new Date(year, month + 1, 0).getDate(); // Utwórz DocumentFragment const fragment = document.createDocumentFragment(); // Wypełnij puste miejsca przed pierwszym dniem miesiąca // Poprawka dla getDay() gdzie niedziela to 0, a my chcemy poniedziałek jako 0 const startDayIndex = (firstDayOfMonth === 0) ? 6 : firstDayOfMonth - 1; for (let i = 0; i < startDayIndex; i++) { const emptyDiv = document.createElement('div'); emptyDiv.classList.add('empty-day'); fragment.appendChild(emptyDiv); } // Generuj dni miesiąca for (let i = 1; i { renderCalendar(currentYear, currentMonth); document.getElementById('prevMonth').addEventListener('click', () => { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(currentYear, currentMonth); }); document.getElementById('nextMonth').addEventListener('click', () => { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } renderCalendar(currentYear, currentMonth); }); }); Nie zapomnij o dzisiejszej dacie: Jak wyróżnić aktualny dzień? Wyróżnienie aktualnego dnia to standardowa funkcjonalność każdego kalendarza. W funkcji renderCalendar musimy dodać logikę, która sprawdzi, czy aktualnie generowany dzień odpowiada dzisiejszej dacie. Kluczowe jest, aby sprawdzać nie tylko numer dnia, ale także miesiąc i rok, aby klasa .today była poprawnie przypisywana tylko do faktycznego dzisiejszego dnia, niezależnie od tego, jaki miesiąc przeglądamy. // Fragment funkcji renderCalendar, w pętli generującej dni: for (let i = 1; i { d.classList.remove('selected'); }); // Dodaj klasę 'selected' do klikniętego dnia dayDiv.classList.add('selected'); const selectedDate = new Date(year, month, i); console.log('Wybrano datę:', selectedDate.toLocaleDateString('pl-PL')); // Tutaj możesz dodać dalszą logikę, np. wyświetlić wydarzenia dla tej daty }); fragment.appendChild(dayDiv); } Co dalej? Inspiracje i pomysły na rozbudowę Twojego kalendarza Stworzyłeś solidne fundamenty. Teraz, gdy masz już działający i estetyczny kalendarz, możesz zacząć myśleć o jego rozbudowie i dodaniu bardziej zaawansowanych funkcji. To, co stworzyłeś, jest bazą do wielu interesujących projektów. Oto kilka inspiracji, które pomogą Ci wprowadzić Twój kalendarz na wyższy poziom. Integracja z formularzem: Jak stworzyć funkcjonalny Date Picker? Jednym z najczęstszych zastosowań kalendarza jest integracja z formularzami jako tzw. "Date Picker". Pozwala to użytkownikowi na łatwe wybieranie daty z graficznego interfejsu, zamiast ręcznego wpisywania. Możesz stworzyć pole tekstowe (), które po kliknięciu wyświetli Twój kalendarz. Po wybraniu daty, wartość pola tekstowego zostanie zaktualizowana, a kalendarz ukryty. To bardzo praktyczna funkcja, która poprawia użyteczność formularzy. Kalendarz wydarzeń: Pomysły na dodawanie i wyświetlanie eventów Rozbuduj swój kalendarz o możliwość wyświetlania i dodawania wydarzeń. Możesz przechowywać dane o wydarzeniach w tablicy obiektów JavaScript (dla prostych zastosowań) lub pobierać je z API (dla bardziej złożonych). Następnie, podczas generowania dni, sprawdź, czy dla danego dnia istnieją wydarzenia i wizualizuj je, np. dodając małą kropkę pod numerem dnia lub zmieniając kolor tła komórki. Możesz też dodać funkcję wyświetlania szczegółów wydarzenia po kliknięciu na dzień. Wielojęzyczność: Jak przygotować kalendarz do tłumaczeń? Jeśli Twój kalendarz ma być używany przez międzynarodową publiczność, kluczowe jest przygotowanie go do obsługi wielu języków. Zamiast na stałe kodować nazwy miesięcy i dni tygodnia, stwórz obiekty lub tablice zawierające tłumaczenia. Na przykład, możesz mieć tablicę monthNames_pl = ['Styczeń', 'Luty', ...] i monthNames_en = ['January', 'February', ...]. Następnie, w zależności od wybranego języka, używaj odpowiedniej tablicy do wyświetlania nazw. To pozwoli na łatwe dodawanie nowych języków w przyszłości bez konieczności modyfikowania głównej logiki kalendarza.