Aby stworzyć kalendarz na stronie HTML, należy połączyć strukturę HTML, style CSS oraz funkcjonalność JavaScript. Dzięki temu otrzymamy nie tylko estetyczne, ale i interaktywne narzędzie do prezentowania lub zarządzania datami. Taki kalendarz możesz wykorzystać np. do wyboru terminu rezerwacji, planowania wydarzeń lub prezentacji harmonogramu.
Struktura kalendarza w HTML
Podstawowy szkielet strony powinien zawierać miejsce, w którym zostanie wygenerowany kalendarz oraz dołączone pliki ze stylami i skryptami. 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>
Element <div id="calendar"></div> to miejsce, gdzie zostanie wyświetlony nasz kalendarz.
Stylizacja kalendarza z użyciem CSS
Dzięki odpowiednim stylom kalendarz będzie czytelny i przyjemny w obsłudze. Oto przykładowy fragment CSS:
#calendar {
max-width: 350px;
margin: 40px auto;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
padding: 20px;
background: #fff;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
margin-bottom: 10px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar-day, .calendar-cell {
text-align: center;
padding: 8px 0;
border-radius: 5px;
}
.calendar-day {
background: #f3f3f3;
font-size: 0.9em;
font-weight: bold;
}
.calendar-cell.selected {
background: #026cff;
color: #fff;
}
.calendar-cell.today {
border: 1px solid #026cff;
}
Skrypt JavaScript generujący kalendarz
Poniższy skrypt generuje prosty miesięczny kalendarz, umożliwiając nawigację między miesiącami i podświetlanie wybranego dnia.
$(document).ready(function(){
const calendar = $('#calendar');
let selectedDate = new Date();
function renderCalendar(date) {
calendar.empty();
const year = date.getFullYear();
const month = date.getMonth();
const today = new Date();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const firstDayIndex = new Date(year, month, 1).getDay();
// Nagłówek z nazwą miesiąca i przyciskami
const header = $(`
<div class="calendar-header">
<button class="prev-month"><</button>
<span>${date.toLocaleString('pl-PL', { month: 'long', year: 'numeric' })}</span>
<button class="next-month">></button>
</div>`);
calendar.append(header);
// Nazwy dni tygodnia
const days = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb', 'Nd'];
const grid = $('<div class="calendar-grid"></div>');
days.forEach(day => grid.append('<div class="calendar-day">' + day + '</div>'));
// Puste komórki na początek miesiąca
let blanks = (firstDayIndex + 6) % 7;
for(let i=0; i<blanks; i++) {
grid.append('<div class="calendar-cell"></div>');
}
// Komórki z dniami miesiąca
for(let d=1; d<=daysInMonth; d++) {
let cell = $('<div class="calendar-cell">' + d + '</div>');
if (d === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
cell.addClass('today');
}
if (d === selectedDate.getDate() && month === selectedDate.getMonth() && year === selectedDate.getFullYear()) {
cell.addClass('selected');
}
cell.click(function() {
selectedDate.setDate(d);
selectedDate.setMonth(month);
selectedDate.setFullYear(year);
renderCalendar(selectedDate);
});
grid.append(cell);
}
calendar.append(grid);
// Obsługa nawigacji
header.find('.prev-month').click(function() {
selectedDate.setMonth(month - 1);
renderCalendar(selectedDate);
});
header.find('.next-month').click(function() {
selectedDate.setMonth(month + 1);
renderCalendar(selectedDate);
});
}
renderCalendar(selectedDate);
});
Przykłady zastosowań kalendarza
- Wybór daty w formularzu – kalendarz można podłączyć do pola input, by użytkownik mógł wygodnie wybrać datę np. podczas rejestracji lub rezerwacji terminu;
- System rezerwacji – możesz podświetlać dostępne dni i blokować niedostępne zgodnie z Twoją logiką (np. weekendy w hotelu);
- Prezentacja terminarza wydarzeń – wybrane dni można wyróżniać za pomocą kolorów lub ikonek, a po kliknięciu w komórkę wyświetlać szczegóły wydarzenia z danego dnia (np. lista spotkań);
- Harmonogram pracy – w firmach kalendarz służy do planowania grafików pracowniczych, z podziałem na zmiany, urlopy i dyżury;
- Integracja z backendem – za pomocą AJAX i endpointów możesz pobierać, zapisywać i wyświetlać dane z bazy, np. zaznaczać wydarzenia lub rezerwacje dla wybranych dni.
Rozszerzenia i inspiracje
- Dodanie wielomiesięcznego widoku – możliwość przeglądania kilku miesięcy naraz;
- Walidacja zakresu dat – ograniczenie wyboru np. do przyszłych dat;
- Wyświetlanie notatek/zdarzeń – dni z wydarzeniami mogą mieć specjalne znaczniki (np. kolorowe kropki);
- Obsługa świąt i dni wolnych – graficzne wyróżnianie specjalnych dni.
Podsumowanie – stworzenie kalendarza na stronie HTML to świetny sposób na wzbogacenie serwisu o praktyczne i atrakcyjne narzędzie. Wersja zaprezentowana powyżej jest uniwersalna i łatwa do rozbudowy – dostosuj ją do swoich potrzeb, dodając np. backend, integrację z wydarzeniami lub kolejne opcje dla użytkownika.
