Script Widget Kalender Indonesia, Dilengkapi Hari Libur & Tanggal Merah - XWAPPER

Assalamu’alaykum Sobat... Kali ini saya akan share script widget kalender Indonesia, untuk mempercantik blog kamu. Widget ini berbeda dengan widget kalender kebanyakan, karena di script ini sudah include daftar hari libur nasional (update manual di koding), jadi tampilannya mirip kalender rumah

Langsung saja sedot scriptnya dibawah ini, letakkan di tata letak, agar tampil di sidebar blog kamu.

<div class="xwapper-cal">
  <div class="xwapper-header" id="calMonth"></div>
  <div class="xwapper-days">
    <div class="xwapper-sun">Min</div>
    <div>Sen</div>
    <div>Sel</div>
    <div>Rab</div>
    <div>Kam</div>
    <div>Jum</div>
    <div>Sab</div>
  </div>
  <div class="xwapper-grid" id="calGrid"></div>
  
  <div id="calLibur" class="xwapper-info"></div>
</div>

<style>
  .xwapper-cal { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
    width: 100% !important; 
    max-width: 300px !important; 
    background: #ffffff !important; 
    border: 2px solid #1e88e5 !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    margin: 10px auto !important;
  }
  .xwapper-header { 
    background: #1e88e5 !important; 
    color: #ffffff !important; 
    text-align: center !important; padding: 15px !important; 
    font-weight: bold !important; font-size: 16px !important;
    text-transform: uppercase !important;
  }
  .xwapper-days { 
    display: grid !important; grid-template-columns: repeat(7, 1fr) !important; 
    background: #f1f8ff !important; text-align: center !important; 
    font-size: 11px !important; font-weight: bold !important;
    padding: 10px 0 !important; color: #555 !important;
  }
  .xwapper-grid { 
    display: grid !important; grid-template-columns: repeat(7, 1fr) !important; 
    text-align: center !important; padding: 10px !important; 
  }
  .xwapper-date { padding: 10px 0 !important; font-size: 14px !important; color: #333 !important; }
  .xwapper-sun, .xwapper-holiday { color: #d32f2f !important; font-weight: bold !important; }
  .xwapper-today { background: #ffeb3b !important; color: #000 !important; border-radius: 50% !important; font-weight: bold !important; }
  
  /* Style Keterangan Libur */
  .xwapper-info { 
    background: #fff9f9 !important; 
    padding: 10px !important; 
    font-size: 11px !important; 
    color: #333 !important; 
    border-top: 1px dashed #1e88e5 !important;
    line-height: 1.5 !important;
  }
  .libur-item { color: #d32f2f !important; font-weight: bold !important; display: block !important; }
</style>

<script>
  (function() {
    const holidays = {
      "1": "Tahun Baru 2026 Masehi",
      "27": "Isra Mikraj Nabi Muhammad SAW",
      "29": "Tahun Baru Imlek 2577 Kongzili"
    };

    const d = new Date();
    const currMonth = d.getMonth();
    const currYear = d.getFullYear();
    const today = d.getDate();

    const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
    document.getElementById("calMonth").innerText = monthNames[currMonth] + " " + currYear;

    const firstDay = new Date(currYear, currMonth, 1).getDay();
    const daysInMonth = new Date(currYear, currMonth + 1, 0).getDate();
    const grid = document.getElementById("calGrid");
    const infoBox = document.getElementById("calLibur");

    let liburHtml = "<b>Keterangan Libur:</b><br/>";
    let adaLibur = false;

    for (let i = 0; i < firstDay; i++) { grid.appendChild(document.createElement("div")); }

    for (let date = 1; date <= daysInMonth; date++) {
      const dateDiv = document.createElement("div");
      dateDiv.className = "xwapper-date";
      dateDiv.innerText = date;

      if (new Date(currYear, currMonth, date).getDay() === 0) dateDiv.classList.add("xwapper-sun");
      if (date === today) dateDiv.classList.add("xwapper-today");
      
      if (holidays[date]) {
        dateDiv.classList.add("xwapper-holiday");
        liburHtml += `<span class="libur-item">${date}: ${holidays[date]}</span>`;
        adaLibur = true;
      }
      grid.appendChild(dateDiv);
    }

    infoBox.innerHTML = adaLibur ? liburHtml : "<i>Tidak ada libur nasional bulan ini.</i>";
  })();
</script>

Cara Edit Hari Libur:

Kalian tinggal cari bagian const holiday = { "1": "Tahun Baru", ... } di dalam script. Ganti angka di dalam tanda kutip dengan tanggal merah yang berlaku bulan itu. Gampang kan? Selamat mencoba..

Demo seperti di gambar.