Wprowadzenie do tworzenia Kalendarza za pomocą HTML, CSS i JavaScript z użyciem jQuery
W erze cyfrowej kalendarze stały się nieodłączną częścią naszego życia. Ułatwiają zarządzanie czasem i planowanie wydarzeń. Tworzenie własnego kalendarza internetowego to fascynujący projekt programistyczny. Jest to też doskonała okazja do nauki i doskonalenia umiejętności w zakresie front-endu. W tym wpisie na blogu przedstawiam, jak krok po kroku stworzyć prosty kalendarz miesięczny. Użyję do tego HTML, CSS oraz JavaScript z biblioteką jQuery. Ten projekt posłuży jako fundament do rozszerzania funkcjonalności kalendarza w przyszłości.
Kalendarz w swojej najprostszej formie to sposób prezentacji dat w uporządkowanej strukturze, często w formie tabeli lub siatki. W kontekście webowym naszym celem jest stworzenie interfejsu. Chcemy, aby był on nie tylko funkcjonalny, ale także estetycznie przyjemny. HTML i CSS będą służyły do zbudowania struktury i stylów naszego kalendarza. JavaScript, z pomocą jQuery, posłuży do dodawania interaktywności, takiej jak generowanie dni miesiąca i obsługa zdarzeń.
Struktura początkowego kodu HTML kalendarza
Nasz kalendarz zaczniemy od stworzenia prostego szkieletu HTML, który posłuży jako kontener na wszystkie elementy kalendarza. Poniżej przedstawiono przykładowy kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kalendarz</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>W sekcji <head> załączamy odnośniki do naszych zewnętrznych arkuszy stylów (style.css) i skryptów (script.js oraz jQuery). Wybraliśmy jQuery jako bibliotekę ze względu na jej prostotę w manipulacji DOM i obsłudze zdarzeń, co jest idealne dla początkujących. Element <div> o identyfikatorze calendar w sekcji <body> jest miejscem, gdzie dynamicznie będą generowane wszystkie elementy naszego kalendarza.
Stylowanie z CSS
Następnie dodajemy proste style CSS, które pomogą wizualnie zorganizować dni w kalendarzu:
#calendar div {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
line-height: 50px;
background-color: lightgrey;
float: left;
}Styl ten zapewnia, że każda komórka kalendarza (dni) będzie miała określone wymiary, marginesy, oraz tło. Użycie właściwości float: left; powoduje, że dni będą uporządkowane w rzędach poziomych.
JavaScript i jQuery
Będziemy implementować podstawową funkcjonalność JavaScript za pomocą jQuery. Skrypt będzie odpowiedzialny za generowanie dni miesiąca wewnątrz naszego kontenera #calendar:
$(document).ready(function() {
for (let i = 1; i <= 31; i++) {
$("#calendar").append("<div>" + i + "</div>");
}
});Ten kod wykorzystuje metodę .append() do dodawania nowych elementów div do naszego kontenera kalendarza, z liczbami od 1 do 31 reprezentującymi dni miesiąca. Jest to bardzo prosty sposób na demonstrację generowania dynamicznych treści.
Modyfikacja kodu dla lepszej organizacji dni tygodnia
Po pierwszej demonstracji prostego generowania dni miesiąca, możemy wprowadzić pewne modyfikacje. Umożliwią one lepszą organizację wyświetlania dni w kontekście tygodni. W tradycyjnym układzie kalendarza organizuje się dni w tygodnie. To można symulować, czyszcząc właściwość CSS float po każdym siódmym dniu. Poniższy zmodyfikowany kod jQuery to realizuje:
$(document).ready(function() {
for (let i = 1; i <= 31; i++) {
if (i % 7 == 1) { // Każdy pierwszy dzień tygodnia zaczyna nowy rząd
$("#calendar").append('<div class="clear">' + i + '</div>');
} else {
$("#calendar").append("<div>" + i + "</div>");
}
}
});W powyższym kodzie, warunek if (i % 7 == 1) sprawdza, czy dzień jest pierwszym dniem nowego tygodnia (zakładając, że pierwszy dzień miesiąca zaczyna tydzień). Jeśli tak jest, do kontenera dodawany jest div z klasą clear, co spowoduje, że każdy nowy tydzień zaczyna się od nowej linii dzięki właściwości CSS:
.clear {
clear: both;
}Klasa .clear używa właściwości CSS clear: both;, co przerywa ciągłość pływania elementów i zmusza kolejne div do rozpoczęcia od nowej linii. Dzięki temu kalendarz lepiej odwzorowuje tradycyjny układ tygodniowy, co poprawia zarówno funkcjonalność, jak i estetykę projektu.
Użycie operatora trójargumentowego do uproszczenia kodu
Operator trójargumentowy jest potężnym narzędziem w języku JavaScript, który pozwala na zwięzłe formułowanie warunków. Możemy wykorzystać go do dalszego uproszczenia kodu naszego kalendarza, szczególnie w części dotyczącej dodawania odpowiednich klas do elementów div, reprezentujących dni. Przeanalizujmy poniższy kod:
$(document).ready(function() {
for (let i = 1; i <= 31; i++) {
$("#calendar").append('<div class="' + ((i % 7 == 1) ? 'clear' : '') + '">' + i + '</div>');
}
});W tym fragmencie, zamiast używać standardowego bloku if...else do decydowania, czy dodać klasę clear czy nie, kod wykorzystuje operator trójargumentowy, który działa jak skrócona forma instrukcji warunkowej. Składnia operatora warunek ? wartość_jeśli_true : wartość_jeśli_false pozwala na bezpośrednie osadzenie logiki warunkowej w łańcuchu, który jest przekazywany jako klasa.
W powyższym przykładzie, (i % 7 == 1) ? 'clear' : '' sprawdza, czy i jest pierwszym dniem nowego tygodnia. Jeśli tak, operator zwraca 'clear', co spowoduje dodanie tej klasy do div i zastosowanie odpowiedniego stylu CSS, który „czyści” pływanie, rozpoczynając nowy rząd. Jeśli nie, zwraca się pusty łańcuch, co oznacza brak dodatkowej klasy.
Wykorzystanie operatora trójargumentowego nie tylko skraca kod, ale również poprawia jego czytelność i ułatwia późniejsze modyfikacje. Dzięki temu można szybko i efektywnie zarządzać klasami elementów HTML bez potrzeby pisania dodatkowych bloków warunkowych.
Dodawanie nagłówków dni tygodnia do kalendarza
Kolejnym krokiem w rozbudowie naszego kalendarza jest wprowadzenie nagłówków dla dni tygodnia, co pozwala na lepszą orientację w strukturze kalendarza. Wprowadzimy te zmiany za pomocą następującego kodu JavaScript i jQuery:
$(document).ready(function() {
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia
for (let i = 0; i <= 6; i++) {
$("#calendar").append('<div class="day-name">' + dayName[i] + '</div>');
}
// Wyświetlenie dni miesiąca
for (let i = 1; i <= 31; i++) {
$("#calendar").append('<div class="' + ((i % 7 == 1) ? 'clear' : '') + '">' + i + '</div>');
}
});W tym kodzie najpierw tworzona jest tablica dayName, która zawiera skrócone nazwy dni tygodnia. Następnie, w pierwszej pętli, każdy element tej tablicy jest dodawany do kalendarza jako div z klasą day-name. Ta klasa służy do zastosowania specyficznych stylów CSS, które odróżniają nagłówki dni od pozostałych elementów kalendarza.
Stylowanie nagłówków dni tygodnia jest równie proste, co funkcjonalne:
#calendar .day-name {
color: white;
background-color: darkgrey;
}W tym fragmencie CSS, elementy z klasą .day-name mają ciemnoszare tło i biały tekst, co sprawia, że są one łatwo rozpoznawalne na tle pozostałych elementów kalendarza. Dzięki tym nagłówkom, użytkownik może łatwiej zorientować się, jaki dzień tygodnia odpowiada poszczególnym datom.
Dodanie nagłówków dni tygodnia nie tylko zwiększa czytelność kalendarza, ale także wzbogaca jego estetykę, czyniąc go bardziej profesjonalnym i funkcjonalnym narzędziem do zarządzania czasem.
Zastosowanie stylów dla weekendów w kalendarzu
Aby jeszcze bardziej zwiększyć funkcjonalność i czytelność naszego kalendarza, możemy wprowadzić różnicowanie stylów dla dni weekendowych, co jest typową praktyką w większości kalendarzy. Modyfikacja kodu pozwala na wyróżnienie sobót i niedziel poprzez dodanie specjalnych klas CSS. Oto jak to zrobiliśmy:
$(document).ready(function() {
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
$("#calendar").append('<div class="day-name' + (i == 5 ? ' saturday' : i == 6 ? ' sunday' : '') + '">' + dayName[i] + '</div>');
}
// Wyświetlenie dni miesiąca z odpowiednią klasą dla weekendu
for (let i = 1; i <= 31; i++) {
$("#calendar").append('<div class="' + ((i % 7 == 1) ? 'clear' : (i % 7 == 0) ? 'sunday' : (i % 7 == 6) ? 'saturday' : '') + '">' + i + '</div>');
}
});W kodzie JavaScript, operator trójargumentowy jest ponownie wykorzystywany do przypisania klas saturday i sunday odpowiednio dla sobót i niedziel. Dzięki temu, kalendarz automatycznie wyróżnia te dni, zarówno w nagłówkach dni tygodnia, jak i w samych dniach miesiąca.
Stylowanie tych dni realizuje się za pomocą prostych reguł CSS, które zmieniają kolor tła i tekstu, aby te dni były łatwo rozpoznawalne.
#calendar .sunday {
color: white;
background-color: blue;
}
#calendar .saturday {
color: white;
background-color: lightblue;
}Klasy sunday i saturday mają przypisane odpowiednio niebieskie i jasnoniebieskie tła, co natychmiast wyróżnia te dni w kalendarzu. Zastosowanie kontrastujących kolorów dla tekstów (biały) dodatkowo podnosi czytelność.
Te zmiany nie tylko poprawiają estetykę kalendarza, ale również przyczyniają się do lepszej organizacji i planowania, co jest szczególnie ważne w kontekście użytkowania kalendarza do zarządzania czasem i planowania aktywności związanych z weekendami.
Refaktoryzacja kodu za pomocą metod jQuery do zarządzania klasami
W poprzednich przykładach używaliśmy operatora trójargumentowego do bezpośredniego wstawiania nazw klas CSS w znacznikach HTML, co mogło prowadzić do skomplikowanego i mniej czytelnego kodu. Aby usprawnić i uporządkować nasz kod, możemy zastosować metody jQuery do dynamicznego dodawania klas, co zwiększa elastyczność i czytelność kodu. Przyjrzyjmy się zaktualizowanej wersji kodu:
$(document).ready(function() {
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
var divDay = $('<div>').text(dayName[i]).addClass('day-name');
if (i == 5) { divDay.addClass('saturday'); }
if (i == 6) { divDay.addClass('sunday'); }
$("#calendar").append(divDay);
}
// Wyświetlenie dni miesiąca z odpowiednią klasą dla weekendu
for (let i = 1; i <= 31; i++) {
var divDay = $('<div>').text(i);
// Dodanie klasy w zależności od dnia tygodnia
if (i % 7 == 1) { divDay.addClass('clear'); }
if (i % 7 == 0) { divDay.addClass('sunday'); }
if (i % 7 == 6) { divDay.addClass('saturday'); }
$("#calendar").append(divDay);
}
});W tym przykładzie, zamiast tworzyć i modyfikować stringi HTML, tworzymy obiekty jQuery za pomocą metody $('<div>') i dodajemy do nich tekst oraz klasy za pomocą metod .text() i .addClass(). Pozwala to na bardziej modularne i łatwe do zarządzania podejście do budowy elementów HTML.
Co więcej, kod staje się bardziej odporny na błędy i łatwiejszy w utrzymaniu. To ma kluczowe znaczenie w projektach, które mogą się rozwijać lub które różni programiści mogą rozszerzać.
Ta refaktoryzacja nie tylko poprawia jakość i elastyczność kodu. Sprzyja również lepszym praktykom programowania w JavaScript, zwłaszcza przy pracy z bibliotekami takimi jak jQuery.
Rozszerzenie funkcjonalności kalendarza o wsparcie różnych dni startowych i liczby dni w miesiącu
Nasz kalendarz staje się coraz bardziej funkcjonalny i elastyczny dzięki wprowadzeniu możliwości konfiguracji pierwszego dnia miesiąca oraz liczby dni w danym miesiącu. To bardzo przydatne, gdy chcemy dostosować kalendarz do różnych układów miesięcznych. Spójrzmy na szczegóły tej modyfikacji:
$(document).ready(function() {
// Dane startowe
var startDay = 7; // Numer dnia tygodnia 1-7, gdzie 1 - poniedziałek, 7 - niedziela
var maxDay = 30; // Ilość dni w miesiącu
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
var divDay = $('<div>').text(dayName[i]).addClass('day-name');
if (i == 5) { divDay.addClass('saturday'); }
if (i == 6) { divDay.addClass('sunday'); }
$("#calendar").append(divDay);
}
// Wyświetlenie pustych dni na początku miesiąca
for (let i = 1; i < startDay; i++) {
var divDay = $('<div>').addClass('none');
if (i == 1) { divDay.addClass('clear'); }
$("#calendar").append(divDay);
}
// Wyświetlenie dni miesiąca
for (let i = 1; i <= maxDay; i++) {
var ii = i + startDay - 1;
var divDay = $('<div>').text(i);
if (ii % 7 == 1) { divDay.addClass('clear'); }
if (ii % 7 == 0) { divDay.addClass('sunday'); }
if (ii % 7 == 6) { divDay.addClass('saturday'); }
$("#calendar").append(divDay);
}
});Dodawanie pustych dni (div z klasą .none) na początku miesiąca jest kluczowe, aby zachować właściwe wyrównanie dni miesiąca zgodnie z pierwszym dniem miesiąca. Wartość startDay wskazuje, który dzień tygodnia jest pierwszym dniem miesiąca, co jest niezwykle przydatne, gdy miesiąc nie zaczyna się od poniedziałku. Elementy te są wizualnie reprezentowane, ale bez tekstu, co jest uzyskiwane poprzez brak metody .text() w przypadku pustych div.
Stylowanie pustych dni za pomocą CSS:
#calendar .none {
background-color: white;
}To sprawia, że te dni są mniej zauważalne. Przyczynia się to do lepszej organizacji i estetyki kalendarza, jednocześnie utrzymując czytelność układu.
Dzięki tej modyfikacji kalendarz można łatwo dostosować do każdej konfiguracji miesiąca. Dotyczy to zarówno początkowego dnia tygodnia, jak i liczby dni. Czyni to kalendarz bardziej uniwersalnym i przyjaznym dla użytkownika narzędziem do zarządzania czasem.
Automatyczne obliczanie pierwszego dnia miesiąca i liczby dni
Ta modyfikacja naszego kalendarza wprowadza jeszcze większą automatyzację i dokładność, korzystając z obiektu Date w JavaScript, aby określić pierwszy dzień danego miesiąca oraz całkowitą liczbę dni w miesiącu. Zmiana ta sprawia, że kalendarz jest w stanie dynamicznie dostosować się do dowolnego miesiąca i roku. Nie ma już konieczności ręcznego ustawiania tych wartości. Oto szczegółowy opis tej modyfikacji:
$(document).ready(function() {
// Dane startowe
var month = 9; // Wrzesień
var year = 2024;
// Obliczenie pierwszego dnia miesiąca
var startDay = new Date(year, month - 1, 1).getDay(); // .getDay() zwraca indeksy dni tygodnia 0-6, gdzie 0 to niedziela
if (startDay == 0) { startDay = 7; } // Zamiana numeru dla niedzieli na format 1-7
// Pobranie maksymalnego dnia w miesiącu
var maxDay = new Date(year, month, 0).getDate();
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
var divDay = $('<div>').text(dayName[i]).addClass('day-name');
if (i == 5) { divDay.addClass('saturday'); }
if (i == 6) { divDay.addClass('sunday'); }
$("#calendar").append(divDay);
}
// Wyświetlenie pustych dni na początku miesiąca
for (let i = 1; i < startDay; i++) {
var divDay = $('<div>').addClass('none');
if (i == 1) { divDay.addClass('clear'); }
$("#calendar").append(divDay);
}
// Wyświetlenie dni miesiąca
for (let i = 1; i <= maxDay; i++) {
var ii = i + startDay - 1;
var divDay = $('<div>').text(i);
if (ii % 7 == 1) { divDay.addClass('clear'); }
if (ii % 7 == 0) { divDay.addClass('sunday'); }
if (ii % 7 == 6) { divDay.addClass('saturday'); }
$("#calendar").append(divDay);
}
});Funkcja new Date(year, month - 1, 1).getDay() jest używana do uzyskania dnia tygodnia, w którym zaczyna się miesiąc. Jest to kluczowe, aby odpowiednio ustawić kalendarz, szczególnie gdy miesiąc zaczyna się w dzień inny niż poniedziałek. Ponieważ JavaScript używa systemu, w którym niedziela jest dniem o indeksie 0, wykonujemy korektę if (startDay == 0) { startDay = 7; }, aby dostosować to do europejskiego formatu tygodnia, gdzie niedziela jest siódmym dniem.
new Date(year, month, 0).getDate() służy do ustalenia, ile dni jest w danym miesiącu. W tym przypadku tworzymy datę jako pierwszy dzień następnego miesiąca (dzięki month bez odejmowania 1), a następnie używamy 0 jako dnia, co przesuwa datę na ostatni dzień poprzedniego miesiąca, czyli miesiąca, który nas interesuje.
Dzięki tym zmianom, kalendarz można bardzo łatwo przystosować do każdego roku i miesiąca. Nie wymaga to ręcznej aktualizacji liczby dni ani zmiany pierwszego dnia miesiąca. Jest to niezwykle przydatne w aplikacjach wymagających częstego przeglądania kalendarzy z różnych lat. Automatyzacja tego procesu znacząco zwiększa efektywność zarządzania kalendarzem, umożliwiając szybką adaptację do zmieniających się danych wejściowych.
Wprowadzenie nagłówka z nazwą miesiąca i roku w kalendarzu
Jako kolejny krok w rozbudowie naszego kalendarza, dodajemy funkcjonalność wyświetlania nazwy bieżącego miesiąca i roku na górze kalendarza. Ta modyfikacja nie tylko zwiększa użyteczność kalendarza, ale również przygotowuje podstawę pod przyszłe funkcje nawigacyjne. Oto jak to zaimplementowaliśmy:
$(document).ready(function() {
// Dane startowe
var month = 9; // Wrzesień
var year = 2024;
// Obliczenie pierwszego dnia miesiąca
var startDay = new Date(year, month - 1, 1).getDay(); // .getDay() zwraca indeksy dni tygodnia 0-6, gdzie 0 to niedziela
if (startDay == 0) { startDay = 7; } // Zamiana numeru dla niedzieli na format 1-7
// Pobranie maksymalnego dnia w miesiącu
var maxDay = new Date(year, month, 0).getDate();
// Tablica z nazwami miesięcy
var monthName = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"];
// Wyświetlanie nazwy miesiąca i roku oraz elementów nawigacyjnych
var divDay = $('<div>').text("<");
$("#calendar").append(divDay);
divDay = $('<div>').text(monthName[month-1] + " " + year).addClass('month-year');
$("#calendar").append(divDay);
divDay = $('<div>').text(">");
$("#calendar").append(divDay);
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
var divDay = $('<div>').text(dayName[i]).addClass('day-name');
if (i == 0) { divDay.addClass('clear'); }
if (i == 5) { divDay.addClass('saturday'); }
if (i == 6) { divDay.addClass('sunday'); }
$("#calendar").append(divDay);
}
// Wyświetlenie pustych dni na początku miesiąca
for (let i = 1; i < startDay; i++) {
var divDay = $('<div>').addClass('none');
if (i == 1) { divDay.addClass('clear'); }
$("#calendar").append(divDay);
}
// Wyświetlenie dni miesiąca
for (let i = 1; i <= maxDay; i++) {
var ii = i + startDay - 1;
var divDay = $('<div>').text(i);
if (ii % 7 == 1) { divDay.addClass('clear'); }
if (ii % 7 == 0) { divDay.addClass('sunday'); }
if (ii % 7 == 6) { divDay.addClass('saturday'); }
$("#calendar").append(divDay);
}
});W centralnej części nagłówka umieszczamy nazwę miesiąca i rok, pobrane z odpowiednio przygotowanej tablicy monthName i zmiennej year. Nazwa miesiąca i rok są wyświetlane w jednym div z klasą month-year, co pozwala na łatwe stylowanie.
Po obu stronach nagłówka z nazwą miesiąca i roku umieszczamy proste elementy nawigacyjne (< i >), które w przyszłości będą używane do przeglądania kolejnych lub poprzednich miesięcy. Chociaż na tym etapie są to tylko statyczne znaki, w przyszłości zostaną one wyposażone w funkcjonalność zmiany miesięcy.
Aby zapewnić odpowiednią widoczność i estetykę, dodaliśmy stylowanie dla klasy month-year:
#calendar .month-year {
width: 290px;
}To stylowanie zapewnia, że nazwa miesiąca i rok są właściwie wyśrodkowane. Mają one również odpowiednią szerokość, co sprawia, że wszystkie elementy są czytelne i estetycznie rozmieszczone.
Ta modyfikacja poprawia nie tylko estetykę i funkcjonalność kalendarza. Ułatwia też użytkownikowi orientację w czasie, dodając czytelne oznaczenie bieżącego miesiąca i roku. Ponadto przygotowanie elementów nawigacyjnych to kluczowy krok ku rozwojowi interaktywnego kalendarza. Umożliwi on łatwe przeglądanie różnych okresów bez konieczności ręcznej zmiany kodu czy przeładowywania strony.
Automatyczne ustawianie daty i wyróżnienie aktualnego dnia w kalendarzu
W celu jeszcze większej funkcjonalności naszego kalendarza, wprowadziliśmy automatyczne pobieranie aktualnej daty i dynamiczne wyróżnienie bieżącego dnia. To ulepszenie znacząco zwiększa użyteczność kalendarza, umożliwiając użytkownikom szybkie zorientowanie się w obecnym dniu. Oto jak zaimplementowaliśmy te zmiany:
$(document).ready(function() {
// Dane startowe
var date = new Date();
var month = date.getMonth() + 1; // Pobranie aktualnego roku w formacie czterocyfrowym
var year = date.getFullYear(); // Pobranie aktualnego miesiąca i korekta indeksu (getMonth zwraca miesiące od 0 do 11)
var day = date.getDate(); // Pobranie aktualnego dnia miesiąca
// Obliczenie pierwszego dnia miesiąca
var startDay = new Date(year, month - 1, 1).getDay(); // .getDay() zwraca indeksy dni tygodnia 0-6, gdzie 0 to niedziela
if (startDay == 0) { startDay = 7; } // Zamiana numeru dla niedzieli na format 1-7
// Pobranie maksymalnego dnia w miesiącu
var maxDay = new Date(year, month, 0).getDate();
// Tablica z nazwami miesięcy
var monthName = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"];
// Wyświetlanie nazwy miesiąca i roku oraz elementów nawigacyjnych
var divDay = $('<div>').text("<");
$("#calendar").append(divDay);
divDay = $('<div>').text(monthName[month-1] + " " + year).addClass('month-year');
$("#calendar").append(divDay);
divDay = $('<div>').text(">");
$("#calendar").append(divDay);
// Tablica z nazwami dni tygodnia
var dayName = ["Pon", "Wto", "Śro", "Czw", "Pią", "Sob", "Nie"];
// Wyświetlenie nazw dni tygodnia z odpowiednią klasą dla weekendu
for (let i = 0; i <= 6; i++) {
var divDay = $('<div>').text(dayName[i]).addClass('day-name');
if (i == 0) { divDay.addClass('clear'); }
if (i == 5) { divDay.addClass('saturday'); }
if (i == 6) { divDay.addClass('sunday'); }
$("#calendar").append(divDay);
}
// Wyświetlenie pustych dni na początku miesiąca
for (let i = 1; i < startDay; i++) {
var divDay = $('<div>').addClass('none');
if (i == 1) { divDay.addClass('clear'); }
$("#calendar").append(divDay);
}
// Wyświetlenie dni miesiąca
for (let i = 1; i <= maxDay; i++) {
var ii = i + startDay - 1;
var divDay = $('<div>').text(i);
if (ii % 7 == 1) { divDay.addClass('clear'); }
if (i == day) { divDay.addClass('today');
} else {
if (ii % 7 == 0) { divDay.addClass('sunday'); }
if (ii % 7 == 6) { divDay.addClass('saturday'); }
}
$("#calendar").append(divDay);
}
});Pobieranie aktualnej daty za pomocą new Date() i przypisywanie jej do zmiennych month, year i day umożliwia kalendarzowi automatyczne ustawienie się na obecny miesiąc i rok. Dzięki temu użytkownicy natychmiast widzą aktualny kontekst czasowy bez potrzeby ręcznego ustawiania daty.
Dodając klasę CSS today do bieżącego dnia miesiąca, nasz kalendarz dynamicznie wyróżnia ten dzień, co jest bardzo użyteczne dla użytkowników w codziennym korzystaniu. Styl color: white; background-color: red; zapewnia, że aktualny dzień jest łatwo zauważalny na tle innych dni.
Styl dla klasy today został zdefiniowany w celu zapewnienia wysokiej widoczności aktualnego dnia:
#calendar .today {
color: white;
background-color: red;
}Te zmiany nie tylko podnoszą funkcjonalność kalendarza, ale także poprawiają jego interaktywność i przydatność w codziennym życiu. Umożliwiając użytkownikom natychmiastowe zorientowanie się w bieżącej dacie.
Podsumowanie i plany na przyszłość
W tym wpisie przedstawiłem, jak krok po kroku zbudować prosty, ale funkcjonalny kalendarz internetowy. Wykorzystaliśmy do tego HTML, CSS oraz JavaScript z biblioteką jQuery. Rozpoczęliśmy od podstawowej struktury, dodaliśmy style, aż po automatyczne ustawianie daty i wyróżnienie aktualnego dnia. Nasz kalendarz stał się coraz bardziej zaawansowanym narzędziem.
Nasz kalendarz jest już przydatny, ale jest jeszcze wiele miejsca na rozszerzenia i ulepszenia. W kolejnym wpisie zajmiemy się implementacją funkcji przełączania miesięcy. Pozwoli to użytkownikom na łatwe nawigowanie między różnymi okresami w roku bez potrzeby odświeżania strony. Planujemy też dodać funkcje zaznaczania ważnych wydarzeń oraz personalizacji wyglądu kalendarza.
Dziękuję za towarzyszenie mi w tej podróży tworzenia kalendarza. Mam nadzieję, że ten materiał zainspirował Was do własnych projektów. Kolejne wpisy pomogą Wam jeszcze bardziej rozwinąć umiejętności w tworzeniu interaktywnych i przyjaznych aplikacji webowych. Zapraszam do śledzenia i uczestnictwa w dalszym rozwoju naszego kalendarza!
Bardzo fajny i przydatny opis. Czekam na kolejne wpisy.
Czy planuje Pan rozbudowę kalendarza o pobieranie danych z mysql ?
Dzięki za komentarz!
Tak, planuję kontynuacje, w tym pobieranie ajaxem danych z api.
Pingback: Refaktoryzacja i rozbudowa Kalendarza w HTML, CSS i jQuery - brylka.net
Pingback: Dodanie tłumaczeń do kalendarza za pomocą AJAX - brylka.net