Banyak tutorial kalender HTML berfokus pada dasar-dasar: grid bulanan statis yang dibangun dengan markup dan gaya sederhana. Namun untuk kalender situs web yang aktif, Anda biasanya menginginkan fitur seperti navigasi, responsivitas, dan dukungan acara agar pengunjung bisa berinteraksi langsung dengan kalender tersebut dan tetap terbarui.
Artikel ini membahas empat pendekatan untuk menambahkan kalender HTML ke situs Anda: menampilkan bulan statis dengan CSS Grid, menambahkan JavaScript untuk navigasi dinamis, menyematkan Google Calendar sebagai iframe, dan menggunakan widget kalender tanpa kode. Setiap metode cocok untuk situasi berbeda, dan kerangka pengambilan keputusan di akhir membantu Anda mencocokkan yang tepat dengan kebutuhan Anda.
- Kode kalender HTML siap salin-tempel menggunakan CSS Grid — versi statis dan dinamis
- Cara menambahkan navigasi bulan dan penandaan hari ini dengan JavaScript murni
- Pengaturan penyematan Google Kalender, termasuk keterbatasannya pada perangkat seluler
- Widget kalender tanpa kode dengan manajemen acara dan penyaringan
- Kerangka keputusan yang mencocokkan metode kalender dengan kasus penggunaan spesifik
Metode yang Dibandingkan
Sebelum memilih pendekatan, perbandingan singkat membantu mempersempit opsi Anda. Empat metode berbeda dalam apa yang bisa mereka lakukan, seberapa banyak persiapan yang dibutuhkan, dan untuk siapa mereka dibuat:
| Metode | Terbaik untuk | Tingkat Kesulitan | Kustomisasi | Acara Dinamis | Biaya |
|---|---|---|---|---|---|
| HTML/CSS Statik | Grid bulan hanya untuk tampilan | Dasar (salin-tempel) | Penuh (CSS Anda) | Tidak | Gratis |
| Kalendar JS Dinamis | Kalender bulan yang dapat dinavigasi | Menengah | Lengkap (kode Anda) | Navigasi Bulan | Gratis |
| Sisipan Google Calendar | Organisasi yang menggunakan Google Kalender | Mudah (iframe) | Sangat terbatas | Ya (tersinkron dengan Google) | Gratis |
| Widget Tanpa Coding | Daftar acara, penyaringan, tautan RSVP | Mudah (tanpa kode) | Lengkap (editor visual) | Ya (manual + sinkronisasi Google) | Gratis–Berbayar |
Intinya: Kalender HTML/CSS statis bekerja dengan baik untuk tata letak visual sederhana, seperti portofolio, jadwal, atau elemen desain. Menambahkan JavaScript memungkinkan navigasi bulan dan rendering tanggal otomatis. Sematan Google Calendar cocok jika Anda sudah mengelola acara di Google dan ingin tampilan cepat dengan perawatan rendah. Widget kalender HTML tanpa kode menambah fleksibilitas, termasuk manajemen acara, acara berulang, penyaringan, dan kustomisasi visual tanpa coding.
Metode 1: Kalender HTML/CSS Statik
Ini adalah kode kalender HTML tersederhana yang bisa Anda buat — tampilan satu bulan menggunakan CSS Grid. Ini adalah fondasi yang menjadi dasar bagi Metode 2, dan berfungsi sebagai templat mandiri jika yang Anda perlukan hanyalah tata letak bulan secara visual.
Kode ini menggunakan CSS Grid dengan repeat(7, 1fr) untuk tata letak hari dengan tujuh kolom. Grid memiliki dukungan browser global sekitar 95% — jadi kompatibilitas tidak menjadi masalah. Berbeda dengan alur kerja lama yang menggunakan tabel HTML dengan atribut usang seperti cellspacing dan bgcolor, Grid memberi Anda tata letak responsif dengan markup yang bersih dan modern.
Salin kode di bawah ini dan tempelkan ke file HTML mana pun atau blok kode CMS. Ini akan menampilkan kalender Juni 2026 — ubah judul bulan dan nomor hari untuk menampilkan bulan yang berbeda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static HTML Calendar</title>
<style>
.calendar {
--accent: #2563eb; /* change this to match your brand */
max-width: 480px;
margin: 0 auto;
font-family: system-ui, sans-serif;
}
.calendar-header {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
gap: 2px;
text-align: center;
}
.day-name {
padding: 0.5rem 0;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.day {
padding: 0.6rem 0;
font-size: 0.95rem;
border-radius: 6px;
}
.day:hover { background: #f1f5f9; }
.today {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.today:hover { background: var(--accent); }
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">June 2026</div>
<div class="calendar-grid">
<span class="day-name">Mon</span>
<span class="day-name">Tue</span>
<span class="day-name">Wed</span>
<span class="day-name">Thu</span>
<span class="day-name">Fri</span>
<span class="day-name">Sat</span>
<span class="day-name">Sun</span>
<!-- June 2026 starts on Monday — no offset needed -->
<span class="day today">1</span>
<span class="day">2</span><span class="day">3</span><span class="day">4</span>
<span class="day">5</span><span class="day">6</span><span class="day">7</span>
<span class="day">8</span><span class="day">9</span><span class="day">10</span>
<span class="day">11</span><span class="day">12</span><span class="day">13</span>
<span class="day">14</span><span class="day">15</span><span class="day">16</span>
<span class="day">17</span><span class="day">18</span><span class="day">19</span>
<span class="day">20</span><span class="day">21</span><span class="day">22</span>
<span class="day">23</span><span class="day">24</span><span class="day">25</span>
<span class="day">26</span><span class="day">27</span><span class="day">28</span>
<span class="day">29</span><span class="day">30</span>
</div>
</div>
</body>
</html>Properti kustom CSS --accent di bagian atas mengendalikan warna sorotan — ubah sekali, header dan penanda hari ini akan ikut terbarui. Tata letaknya responsif secara default karena satuan 1fr membagi ruang yang tersedia secara merata, bukan lebar piksel tetap. Pada layar yang lebih kecil, sel-selnya menyusut secara proporsional tanpa pecah.
Jika bulan yang Anda tampilkan tidak dimulai pada hari Senin, gunakan grid-column-start pada sel hari pertama untuk membawanya ke kolom yang benar. Misalnya, jika bulan dimulai pada hari Rabu, tambahkan style="grid-column-start: 3" pada hari pertama <span class="day">. Ini menempatkan hari pertama di kolom ketiga tanpa memerlukan sel placeholder kosong — salah satu keunggulan CSS Grid dibandingkan tata letak berbasis tabel.
Metode 2: Kalender JavaScript Dinamis
Versi statis berfungsi sebagai snapshot, tetapi sebagian besar kasus penggunaan praktis memerlukan navigasi bulan dan tanggal saat ini yang dirender otomatis. Versi ini menggunakan struktur CSS Grid yang sama dan menambahkan sekitar 50 baris JavaScript murni untuk rendering dinamis.
Kode HTML kalender di bawah ini mendeteksi bulan dan tahun saat ini, menampilkan jumlah hari yang tepat, menempatkan hari pertama di kolom yang benar, menyoroti hari ini, dan memungkinkan pengunjung menavigasi maju dan mundur antar bulan. Pergantian tahun (Desember ke Januari, atau Januari ke Desember) ditangani secara otomatis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic HTML Calendar</title>
<style>
.calendar {
--accent: #2563eb;
max-width: 480px;
margin: 0 auto;
font-family: system-ui, sans-serif;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
}
.calendar-header button {
background: none;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.4rem 0.8rem;
cursor: pointer;
font-size: 0.9rem;
}
.calendar-header button:hover { background: #f1f5f9; }
.month-year {
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.day-name {
padding: 0.5rem 0;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.day {
padding: 0.6rem 0;
font-size: 0.95rem;
border-radius: 6px;
}
.day:hover { background: #f1f5f9; }
.today {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.today:hover { background: var(--accent); }
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">
<button id="prev">← Prev</button>
<span class="month-year" id="monthYear"></span>
<button id="next">Next →</button>
</div>
<div class="calendar-grid" id="grid">
<span class="day-name">Mon</span>
<span class="day-name">Tue</span>
<span class="day-name">Wed</span>
<span class="day-name">Thu</span>
<span class="day-name">Fri</span>
<span class="day-name">Sat</span>
<span class="day-name">Sun</span>
</div>
</div>
<script>
const grid = document.getElementById("grid");
const monthYear = document.getElementById("monthYear");
const now = new Date();
let currentMonth = now.getMonth(); // 0-based: 0 = January
let currentYear = now.getFullYear();
const monthNames = [
"January","February","March","April","May","June",
"July","August","September","October","November","December"
];
function renderCalendar() {
// Clear previous day cells, keep the 7 day-name headers
grid.querySelectorAll(".day").forEach(d => d.remove());
monthYear.textContent = monthNames[currentMonth] + " " + currentYear;
// Day of week for the 1st (0=Sun). Convert to Mon-start: Mon=0 … Sun=6
let firstDay = new Date(currentYear, currentMonth, 1).getDay();
firstDay = (firstDay + 6) % 7;
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
const today = new Date();
// Blank cells before the first day
for (let i = 0; i {
currentMonth--;
if (currentMonth {
currentMonth++;
if (currentMonth > 11) { currentMonth = 0; currentYear++; }
renderCalendar();
});
renderCalendar();
</script>
</body>
</html>"></html>Dua detail JavaScript yang perlu dicatat. Pertama, new Date(year, month, 1).getDay() mengembalikan hari dalam minggu untuk hari pertama, tetapi JavaScript menggunakan Minggu sebagai 0. Konversi (firstDay + 6) % 7 menggeser indeks sehingga Senin adalah 0 dan Minggu adalah 6, cocok dengan tata letak grid yang mulai Senin. Kedua, new Date(year, month + 1, 0).getDate() adalah cara singkat untuk mendapatkan jumlah hari dalam bulan mana pun — hari ke-0 bulan berikutnya adalah hari terakhir bulan berjalan.
Salah kaprah umum dalam JavaScript kalender adalah melupakan bahwa bulan menggunakan indeks mulai dari 0. Januari adalah 0, bukan 1. Jika kalender Anda menampilkan bulan yang salah, ini hampir selalu penyebabnya. Pengendali navigasi juga perlu menangani pergantian tahun secara eksplisit — mengurangi satu bulan lewat Januari harus mengatur bulan ke Desember dan mengurangi satu tahun.
Metode 3: Sematkan Kalender Google
Jika organisasi Anda sudah mengelola jadwalnya di Google Kalender, menyematkannya sebagai iframe menghilangkan langkah pengkodean sama sekali. Hasilnya adalah kalender acara HTML langsung yang secara otomatis diperbarui setiap kali Anda menambahkan atau mengubah acara di Google Kalender.
Proses Penyiapan
- Jadikan kalender publik. Di Google Calendar, buka Pengaturan untuk kalender yang ingin Anda sematkan. Di bawah “Izin akses untuk acara,” centang “Buat tersedia untuk umum.” Hanya kalender publik yang akan ditampilkan dalam sisipan — kalender pribadi atau kalender bersama tidak akan ditampilkan.
- Buka Pengaturan Sematkan. Di panel pengaturan yang sama, gulir ke bagian “Integrasikan kalender.” Klik tombol “Kustomisasi” untuk membuka alat kustomisasi.
- Atur tampilan. Alat kustomisasi memungkinkan Anda mengatur judul, tampilan default (Bulan, Minggu, atau Agenda), lebar dan tinggi dalam piksel, tanggal mulai, zona waktu, serta menghidupkan/mematikan elemen seperti tombol navigasi, header tanggal, ikon cetak, dan tab kalender. Anda juga bisa menggabungkan beberapa kalender publik menjadi satu penyematan.
-
Salin kode iframe. Klik “Salin” untuk mendapatkan kode sisip <iframe>. Contohnya seperti ini:
<iframe src="https://calendar.google.com/calendar/embed?src=..." width="800" height="600"></iframe> - Tempelkan ke situs web Anda. Tambahkan iframe ke halaman HTML mana pun atau blok HTML Kustom CMS. Untuk panduan yang lebih rinci, termasuk instruksi penempelan khusus platform, lihat panduan menambahkan Google Calendar ke situs web mana pun.
Kelebihan dan Kekurangan
Sematkan Kalender Google bekerja dengan baik untuk tampilan kalender yang cepat dan gratis, tetapi memiliki keterbatasan. iFrame menggunakan ukuran tetap dan tidak sepenuhnya responsif, yang bisa membuat tampilan di ponsel tidak nyaman.
Karena dimuat dari domain Google, Anda tidak bisa sepenuhnya menyesuaikan desain dengan CSS atau JavaScript milik Anda sendiri, sehingga tampilannya selalu seperti produk Google yang tersemat. Pengunjung bisa melihat acara dan membuka detailnya, tetapi interaksi dibatasi untuk melihat saja, tidak bisa memesan tempat atau RSVP langsung.
Metode 4: Widget Kalender Tanpa Kode
Ketika Anda membutuhkan manajemen acara, kustomisasi visual, dan desain responsif tanpa menulis kode, widget kalender khusus menjembatani antara kalender HTML sederhana dan aplikasi kalender lengkap. Elfsight Event Calendar adalah salah satu opsi di kategori ini — dan hanya butuh 5 menit untuk disiapkan. Berikut prosesnya secara singkat:
- Buka Kalender editor dan pilih template.
- Tambahkan Acara Anda dan atur gayanya.
- Klik “Tambahkan ke situs web” dan salin kode semat.
- Tempelkan kode tersebut ke backend situs Anda dan publikasikan.
Buat Kalender Anda Sendiri di Sini dengan Editor Visual Interaktif ↓
Fitur Unggulan
Segala hal di bawah ini adalah fungsionalitas yang tidak disediakan langsung oleh kalender HTML/JS buatan tangan — dan akan memerlukan waktu pengembangan yang signifikan jika dibangun dari nol.
- Tujuh jenis tata letak — Daftar, Grid, Masonry, Slider, dan tampilan kalender untuk Bulan, Minggu, dan Hari. Satu widget dapat menampilkan tata letak berbeda di halaman yang berbeda.
- Tiga sumber acara — tambah acara secara manual melalui editor visual, impor massal via CSV, atau sinkron satu arah dari Google Calendar (dengan dukungan tempat, penyelenggara, tag, jenis acara, dll.).
- Peristiwa berulang — frekuensi harian, mingguan, bulanan, tahunan, dan kustom dengan penanganan pengecualian untuk kejadian individual.
- Popup acara — pengunjung klik sebuah acara untuk melihat detail lengkap, peta lokasi, tombol CTA, dan opsi “Tambahkan ke Kalender” yang menghasilkan berkas .ics universal.
- Lima filter + pencarian — tanggal, jenis acara, tempat, penyelenggara, dan tag, ditambah kolom pencarian kata kunci. Filter ditampilkan inline atau dalam dropdown.
- Penyesuaian zona waktu pengunjung — waktu acara secara otomatis menyesuaikan dengan zona waktu lokal setiap pengunjung, yang penting untuk acara virtual atau lintas zona waktu.
Berfungsi di WordPress, Shopify, Squarespace, Wix, Webflow, dan semua platform yang mendukung blok HTML kustom. Untuk panduan langkah-demi-langkah lengkap, panduan membuat kalender acara untuk situs Anda menjelaskannya secara rinci.
Metode mana yang cocok untuk situasi Anda
Metode yang tepat bergantung pada apa yang perlu dilakukan kalender Anda, bukan seberapa teknis Anda. Tabel di bawah ini memetakan skenario umum ke pendekatan yang paling sesuai untuk masing-masing.
| Situasi | Metode Terbaik | Mengapa |
|---|---|---|
| Portofolio atau situs pribadi yang membutuhkan tampilan bulan | HTML/CSS Statik | Kontrol desain penuh, tanpa dependensi, kode minimal |
| Situs web yang membutuhkan kalender yang bisa dinavigasi tanpa acara | Kalendar JS Dinamis | Navigasi bulan dan penyorotan hari ini tanpa backend |
| Organisasi yang sudah menggunakan Google Kalender untuk penjadwalan | Sisipan Google Calendar | Sinkron otomatis, tanpa kode, tanpa pemeliharaan |
| Tempat acara, gym, sekolah, atau gereja mempublikasikan daftar acara | Widget Tanpa Coding | Manajemen acara, penyaringan, acara berulang, tombol CTA |
| Pengembang yang membangun aplikasi kalender kustom | Perpustakaan JS (FullCalendar, dll.) | Seret-dan-lepas, aturan acara berulang, dukungan API |
| Situs e-commerce yang menampilkan tanggal promo atau peluncuran | HTML/CSS statis atau Penghitung Waktu Mundur | Kalender penuh sering terlalu berlebihan — cukup tampilkan tanggal. |
| Freelancer atau konsultan yang menampilkan ketersediaan | Widget tanpa kode atau alat pemesanan | Tampilan ketersediaan memerlukan logika penjadwalan, bukan sekadar grid |
Perbedaan utama antara membuat kalender dengan kode dan menggunakan alat biasanya tergantung pada manajemen acara. Kalender JavaScript dasar dengan navigasi bulan relatif mudah, tetapi fitur seperti acara berulang, sinkronisasi Kalender Google, penanganan zona waktu, penyaringan, atau tautan RSVP dengan cepat memperluas cakupan. Pada titik itu, widget atau pustaka kalender sering menjadi opsi yang lebih praktis dan hemat waktu.
Jelajahi 30+ templat Kalender Acara
Perpustakaan Kalender JavaScript
Jika JavaScript murni tidak cukup tetapi widget tanpa kode tidak cocok dengan tumpukan pengembangan Anda, sejumlah perpustakaan open-source berada di tengah. Ini memberi Anda komponen kalender siap pakai dengan dukungan acara, dan Anda mengendalikan integrasinya.
| Perpustakaan JS | Kekuatan utama | Ukuran / adopsi | Lisensi |
|---|---|---|---|
| FullCalendar | Manajemen acara lengkap, seret-dan-lepas, sistem plugin | Lebih dari 19k bintang GitHub, lebih dari 1 juta unduhan npm per minggu | MIT (Standar) |
| TUI Calendar | Dukungan multi-kalender, lokalisasi Asia yang kuat | 8,2k Bintang GitHub | MIT |
| Vanilla Calendar Pro | Ringan, tanpa dependensi, Aksesibilitas bawaan | Ringan / berkembang | MIT |
| Kalender Acara (vkurko) | API mirip FullCalendar, ukuran terkompresi 37kb | Berbasis Svelte, tidak bergantung pada framework | MIT |
FullCalendar is the default recommendation for developers who need a production-ready calendar API with event handling, recurring events, and framework support (React, Vue, Angular). For simpler needs, Vanilla Calendar Pro provides built-in ARIA labels, keyboard navigation, and a smaller footprint.
Tips Aksesibilitas dan Seluler
Kebanyakan panduan membuat kalender di HTML melewatkan aksesibilitas sepenuhnya. Menambahkan beberapa atribut ke kode kalender Anda membuatnya dapat diakses pembaca layar dan pengunjung hanya dengan keyboard, dan upayanya minim dibanding dampaknya.
Untuk kalender berbasis kode pada Metode 1 dan 2, penambahan ini mencakup dasarnya:
- Tambahkan aria-label=”June 2026” (atau bulan/tahun saat ini) ke kontainer grid kalender agar pembaca layar mengumumkan apa yang ditampilkan kalender
- Gunakan atribut abbr pada header nama hari: <span class=”day-name” abbr=”Wednesday”>Wed</span>. Pembaca layar bisa menyuarakan nama hari lengkap alih-alih singkatan
- Untuk kalender JavaScript interaktif, tambahkan role=”grid” pada wadah grid dan role=”gridcell” pada setiap sel hari. Pola date picker W3C APG mendefinisikan model interaksi lengkap, termasuk navigasi tombol panah antara hari dan Page Up/Down untuk perubahan bulan
- Tandai tanggal sekarang dengan aria-current=”date” selain kelas visual .today.
Penafian ARIA
Perhatian ARIA: tambahkan hanya atribut yang Anda pahami. Analisis terhadap satu juta halaman web teratas menunjukkan bahwa halaman yang menggunakan ARIA rata-rata memiliki 59,1 kesalahan aksesibilitas yang terdeteksi, dibandingkan dengan 42 pada halaman tanpa ARIA. Markup ARIA yang salah menciptakan lebih banyak hambatan dibandingkan tidak menggunakan ARIA sama sekali.
Jika Anda sedang membangun kalender tampilan-saja, elemen HTML asli <table> dengan header <th> yang tepat adalah opsi paling dapat diakses secara bawaan — aturan ARIA pertama adalah lebih menyukai semantik HTML bawaan ketika ada.
CSS Grid untuk Seluler
Untuk seluler, kode CSS Grid di kedua metode secara default responsif karena satuan fr membagi ruang yang tersedia secara proporsional. Pada layar sangat kecil (di bawah 360px), ada dua penyesuaian yang membantu: singkatkan nama hari menjadi satu huruf (M, T, W, T, F, S, S) dan kurangi padding sel menjadi 0.35rem. Uji di perangkat nyata sebelum dipublikasikan — emulator tidak selalu mencerminkan bagaimana target sentuh terasa pada ukuran kecil.
Pertanyaan yang Sering Diajukan
Bisakah saya membuat kalender HTML tanpa JavaScript?
Apakah CSS Grid atau tabel HTML lebih baik untuk tata letak kalender?
Bagaimana cara membuat kalender HTML responsif di ponsel?
Bisakah saya menambahkan acara ke kalender HTML tanpa backend?
Apa perbedaan antara kalender HTML dan widget kalender?
Mulai Dari Mana
Pendekatan yang tepat tergantung pada apa yang perlu dilakukan kalender Anda. Tata letak bulan hanya untuk tampilan memakan sekitar 30 menit dengan kode dalam artikel ini. Kalender yang dapat dinavigasi dengan penyorotan hari ini memakan waktu sedikit lebih lama. Kalender acara dengan penyaringan, acara berulang, dan tautan RSVP memerlukan alat yang berbeda sama sekali — dan mengenali batasan itu sejak dini akan menghemat lebih banyak waktu daripada mengoptimalkan kode sebanyak apa pun.
Mulailah dengan metode paling sederhana yang memenuhi kebutuhan Anda. Jika Anda terasa terlalu sederhana, langkah berikutnya jelas: sebuah widget kalender yang bisa Anda sematkan tanpa membangun ulang dari nol, atau pustaka JavaScript jika Anda membutuhkan kendali penuh secara pemrograman. Kedua opsi ini membangun di atas fondasi yang tepat untuk pekerjaan ini — tidak memaksa kalender HTML sederhana melakukan hal yang tidak dirancang untuk itu.
