Aby stworzyć kalendarz w HTML, należy połączyć strukturę HTML, style CSS oraz logikę JavaScript (lub jQuery), co pozwala na wyświetlanie aktualnych dat, przeglądanie miesięcy i łatwą personalizację wyglądu oraz funkcji. Poniżej znajdziesz szczegółowy poradnik ze wskazówkami, kodami i przykładami zastosowań.
Struktura html
Podstawowy szkielet kalendarza tworzy się za pomocą elementu <div>, który będzie miejscem docelowym dla kalendarza generowanego dynamicznie:
<!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>Umieszczenie własnego arkusza CSS i pliku JS daje pełną kontrolę nad wyglądem i funkcjonalnością.
Stylowanie kalendarza css
Przykładowe style zapewniają przejrzystość i nowoczesny wygląd:
#calendar {
width: 320px;
background: #fff;
border: 1px solid #ccc;
font-family: 'Segoe UI', sans-serif;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
padding: 20px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.calendar-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}
.calendar-table {
width: 100%;
border-collapse: collapse;
}
.calendar-table th, .calendar-table td {
width: 14.28%;
text-align: center;
padding: 6px 0;
}
.calendar-table td.today {
background: #f3f3fa;
font-weight: bold;
border-radius: 50%;
color: #2058e6;
}Logika javascript – generowanie kalendarza
Poniżej znajduje się przykładowy kod JavaScript (do pliku script.js) budujący prosty kalendarz:
$(function() {
function drawCalendar(month, year) {
const daysOfWeek = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb', 'Nd'];
const now = new Date();
const today = [now.getDate(), now.getMonth(), now.getFullYear()];
const daysInMonth = new Date(year, month + 1, 0).getDate();
const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
let html = '<div class="calendar-header">';
html += '<button class="calendar-btn prev"><</button>';
html += `<span>${year} - ${('0' + (month+1)).slice(-2)}</span>`;
html += '<button class="calendar-btn next">></button></div>';
html += '<table class="calendar-table"><thead><tr>';
for (let d of daysOfWeek) html += `<th>${d}</th>`;
html += '</tr></thead><tbody><tr>';
for (let i = 0; i < firstDayIndex; i++) html += '<td></td>';
for (let day = 1; day <= daysInMonth; day++) {
if ((firstDayIndex + day - 1) % 7 === 0 && day !== 1) html += '</tr><tr>';
let isToday = (day === today && month === today && year === today);
html += `<td${isToday ? ' class="today"' : ''}>${day}</td>`;
}
html += '</tr></tbody></table>';
$('#calendar').html(html);
$('.prev').click(() => updateCalendar(-1));
$('.next').click(() => updateCalendar(1));
}
let curr = new Date();
let currentMonth = curr.getMonth();
let currentYear = curr.getFullYear();
function updateCalendar(dir) {
currentMonth += dir;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
drawCalendar(currentMonth, currentYear);
}
drawCalendar(currentMonth, currentYear);
});Kod pozwala na przewijanie miesięcy oraz wyróżnia obecny dzień.
Dalsze możliwości i przykłady zastosowań
Własny kalendarz może być wykorzystany do –
- rezerwacji terminów w gabinecie, salonie czy restauracji,
- wyświetlania firmowych wydarzeń lub kalendarium bloga,
- tworzenia narzędzia do zarządzania zadaniami,
- wybierania daty w formularzach (np. rejestracyjnych, kontaktowych).
Przykładowe rozszerzenia –
- obsługa wydarzeń przez kliknięcie w dni: pokazywanie pop-upu z informacjami lub formularza,
- możliwość zaznaczania wybranych dni (np. świąt),
- synchronizacja z zewnętrznym kalendarzem (np. Google Calendar) lub lokalnym zapisaniem wydarzeń,
- responsywność – automatyczne dopasowanie do ekranu urządzenia mobilnego za pomocą css media queries.
Alternatywy bez programowania
Istnieją gotowe wtyczki oraz usługi umożliwiające dodanie kalendarza do swojej strony bez potrzeby pisania kodu, jednak własne rozwiązanie daje pełną elastyczność oraz pozwala na bardziej zaawansowaną personalizację.
Dzięki powyższym wskazówkom i przykładom, możesz stworzyć rozbudowany, wizualnie atrakcyjny i funkcjonalny kalendarz, który z łatwością dostosujesz do swoich indywidualnych potrzeb oraz integracji z innymi elementami serwisu internetowego.
