📆✨ Cara Membuat Aplikasi Kalender Sederhana dengan HTML, CSS, dan JavaScript


📆✨ Cara Membuat Aplikasi Kalender Sederhana dengan HTML, CSS, dan JavaScript

🧠 Pendahuluan

Kalender adalah alat penting yang sering kita pakai buat ngatur jadwal, lihat tanggal, atau sekadar ngecek hari. Nah, di artikel ini kita bakal bikin aplikasi kalender sederhana pakai HTML, CSS, dan JavaScript. Cocok banget buat kamu yang lagi belajar coding atau pengen bikin proyek mini yang keren. 😎

📁 Struktur File Proyek

Untuk mulai, kita butuh 3 file utama:

  • index.html → buat kerangka halaman
  • style.css → buat desain tampilannya
  • script.js → buat fungsionalitas atau logikanya

Pastikan semua file disimpan dalam satu folder ya! 📂

🏗️ 1. HTML – Bangun Rangka Kalender

Ini dia struktur dasar tampilan kalender kita:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kalender Sederhana</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar">
    <div class="header">
      <button id="prev">&#8592;</button>
      <h2 id="month-year"></h2>
      <button id="next">&#8594;</button>
    </div>
    <div class="weekdays">
      <div>Min</div><div>Sen</div><div>Sel</div><div>Rab</div><div>Kam</div><div>Jum</div><div>Sab</div>
    </div>
    <div id="dates" class="dates"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

🎨 2. CSS – Biar Tampilannya Cantik

Yuk percantik tampilan kalendernya pakai CSS:

body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.calendar {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 320px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header button {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.header h2 {
  margin: 0;
  font-size: 1.2em;
}

.weekdays, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 10px;
}

.weekdays div, .dates div {
  text-align: center;
  padding: 8px 0;
}

.dates div {
  border-radius: 4px;
}

.dates div:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

🧠 3. JavaScript – Bikin Kalender Jadi Hidup

Nah, bagian ini yang bikin kalender bisa jalan dan berubah-ubah tanggal:

const monthYear = document.getElementById("month-year");
const dates = document.getElementById("dates");
const prev = document.getElementById("prev");
const next = document.getElementById("next");

let currentDate = new Date();

function renderCalendar(date) {
  const year = date.getFullYear();
  const month = date.getMonth();

  const firstDay = new Date(year, month, 1).getDay();
  const lastDate = new Date(year, month + 1, 0).getDate();

  const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni",
                      "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
  monthYear.textContent = `${monthNames[month]} ${year}`;

  dates.innerHTML = "";

  for (let i = 0; i < firstDay; i++) {
    dates.innerHTML += `<div></div>`;
  }

  for (let i = 1; i <= lastDate; i++) {
    dates.innerHTML += `<div>${i}</div>`;
  }
}

prev.onclick = () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar(currentDate);
};

next.onclick = () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar(currentDate);
};

renderCalendar(currentDate);

✅ Hasil Akhir

Setelah semua disatukan, kamu bakal lihat:

  • 📅 Kalender dengan tampilan bulan & tahun
  • 🔄 Tombol panah buat pindah bulan
  • 📆 Tanggal yang tertata rapi dalam grid

🔧 Bisa Ditambah Fitur Apa Aja?

Kamu bisa kembangkan lebih jauh dengan fitur tambahan seperti:

  • 🌟 Menandai hari ini (highlight)
  • 📝 Menyimpan catatan per tanggal
  • 🌙 Mode gelap (dark mode)
  • 🇮🇩 Menampilkan hari libur nasional

🏁 Penutup

Sekarang kamu sudah punya aplikasi kalender sederhana buatan sendiri! 💪

Proyek ini nggak cuma seru, tapi juga melatih logika dan pemahaman kamu tentang tanggal dan DOM di JavaScript.

Komentar

Posting Komentar