Cara Membuat Halaman Kalender Online di Blogger (Script Full Page)

Memasang fitur tambahan di sidebar seringkali membuat tampilan blog terasa sempit dan berantakan. Jika Anda ingin menghadirkan fitur Kalender Interaktif yang lebih profesional, solusi terbaiknya adalah menempatkannya pada halaman statis (Laman) tersendiri.

Dengan cara ini, kalender akan tampil penuh (full width), lebih responsif di perangkat mobile, dan memberikan pengalaman layaknya sebuah aplikasi web (Web App) di dalam blog Anda. Berikut adalah panduan lengkap cara membuatnya.

Mengapa Menggunakan Halaman Statis?

Berbeda dengan widget sidebar yang ukurannya terbatas, membuat halaman khusus memberikan fleksibilitas desain yang lebih baik dan fokus pengguna yang lebih terarah.

Langkah Pembuatan Halaman Kalender

Proses ini dilakukan melalui menu Halaman (Pages), bukan Tata Letak. Pastikan Anda mengikuti langkah-langkah di bawah ini dengan teliti agar kode script dapat berjalan sempurna.

Script Kalender Full Page

Salin kode di bawah ini sepenuhnya. Kode ini sudah saya sesuaikan agar tampil presisi di tengah halaman blog (centered layout) dan otomatis mendeteksi hari libur nasional.

<div id="calendar-app">
  
  <style>
    /* Scoped Styles untuk Halaman Statis */
    #calendar-app {
      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      max-width: 100%; /* Full width container */
      width: 600px; /* Ideal width */
      margin: 20px auto; /* Center alignment */
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.15);
      border: 1px solid #e1e8f0;
      color: #334155;
      overflow: hidden;
      position: relative;
    }

    #calendar-app * { box-sizing: border-box; }

    /* Header Styling */
    .cal-header {
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
      padding: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
    }

    .cal-title-group { text-align: left; }
    .cal-month { font-size: 24px; font-weight: 700; margin: 0; line-height: 1; }
    .cal-year { font-size: 16px; opacity: 0.9; margin-top: 5px; font-weight: 400; }

    .cal-nav { display: flex; gap: 10px; }
    .cal-btn {
      background: rgba(255,255,255,0.2); border: none;
      color: white; width: 40px; height: 40px; border-radius: 12px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .cal-btn:hover { background: rgba(255,255,255,0.4); }
    .cal-btn svg { width: 24px; height: 24px; }

    /* Grid Area */
    .cal-body { padding: 25px; }
    
    .cal-days-header {
      display: grid; grid-template-columns: repeat(7, 1fr);
      margin-bottom: 15px; text-align: center;
    }
    .cal-day-name {
      font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px;
    }
    .cal-day-name.red { color: #ef4444; }

    .cal-grid {
      display: grid; grid-template-columns: repeat(7, 1fr);
      row-gap: 8px; column-gap: 8px;
    }

    .cal-date {
      height: 50px; display: flex; align-items: center; justify-content: center;
      border-radius: 12px; font-size: 15px; font-weight: 500;
      color: #334155; cursor: default; transition: all 0.2s; position: relative;
    }
    .cal-date:hover { background: #f1f5f9; transform: scale(1.05); }
    
    .cal-date.empty { background: transparent; cursor: default; }
    .cal-date.empty:hover { transform: none; }
    
    .cal-date.today { background: #3b82f6; color: white !important; font-weight: 700; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); }
    
    .cal-date.is-holiday { color: #ef4444; font-weight: 700; }
    .cal-date.today.is-holiday { background: #ef4444; color: white !important; }

    .cal-dot {
      width: 5px; height: 5px; background: #ef4444; border-radius: 50%;
      position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    }
    .cal-date.today .cal-dot { background: white; }

    /* Footer Info */
    .cal-footer {
      background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 25px;
    }
    .cal-footer-title {
      font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 15px;
      display: flex; align-items: center; gap: 10px;
    }
    
    .holiday-list {
      display: grid; grid-template-columns: 1fr; gap: 12px;
    }
    @media (min-width: 500px) {
        .holiday-list { grid-template-columns: 1fr 1fr; }
    }

    .holiday-item {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
      padding: 12px; display: flex; align-items: center; gap: 12px;
      transition: transform 0.2s;
    }
    .holiday-item:hover { transform: translateY(-2px); border-color: #94a3b8; }

    .h-date-box {
      background: #fee2e2; color: #dc2626; font-weight: 700;
      padding: 6px 12px; border-radius: 8px; font-size: 13px;
      min-width: 50px; text-align: center;
    }
    .h-name { font-size: 14px; color: #475569; line-height: 1.4; }
    
    .no-holiday {
        grid-column: 1 / -1; text-align: center; font-size: 14px; color: #94a3b8; padding: 15px; font-style: italic;
    }
    
    /* Mobile Responsive Adjustments */
    @media (max-width: 480px) {
        #calendar-app { border-radius: 12px; margin: 10px auto; }
        .cal-date { height: 40px; font-size: 13px; }
        .cal-header { padding: 15px; }
        .holiday-list { grid-template-columns: 1fr; }
    }
  </style>

  <div class="cal-header">
    <div class="cal-title-group">
      <h2 id="monthDisplay" class="cal-month">Januari</h2>
      <div id="yearDisplay" class="cal-year">2026</div>
    </div>
    <div class="cal-nav">
      <button class="cal-btn" onclick="changeMonth(-1)" aria-label="Bulan Sebelumnya">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
      </button>
      <button class="cal-btn" onclick="changeMonth(1)" aria-label="Bulan Selanjutnya">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
      </button>
    </div>
  </div>

  <div class="cal-body">
    <div class="cal-days-header">
      <div class="cal-day-name red">Min</div> <div class="cal-day-name">Sen</div>
      <div class="cal-day-name">Sel</div>
      <div class="cal-day-name">Rab</div>
      <div class="cal-day-name">Kam</div>
      <div class="cal-day-name">Jum</div>
      <div class="cal-day-name">Sab</div>
    </div>
    
    <div id="calGrid" class="cal-grid"></div>
  </div>

  <div class="cal-footer">
    <div class="cal-footer-title">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
      Agenda & Libur Nasional:
    </div>
    <div id="holidayList" class="holiday-list"></div>
  </div>

  <script>
    // --- KONFIGURASI HARI LIBUR (Edit di sini) ---
    // Format Key: "BULAN-TANGGAL" (Ingat: Januari = 0, Desember = 11)
    const holidays = {
      "0-1": "Tahun Baru Masehi",
      "0-27": "Isra Mi'raj",
      "0-29": "Imlek 2576",
      "2-29": "Nyepi (Tahun Baru Saka)",
      "2-31": "Idul Fitri 1446 H (H1)", 
      "3-1": "Idul Fitri 1446 H (H2)",  
      "4-1": "Hari Buruh",
      "4-12": "Hari Waisak",
      "4-29": "Kenaikan Isa Almasih",
      "5-1": "Hari Lahir Pancasila",
      "5-6": "Idul Adha 1446 H",
      "6-7": "Tahun Baru Islam 1447 H",
      "7-17": "HUT Kemerdekaan RI",
      "8-5": "Maulid Nabi Muhammad",
      "11-25": "Hari Raya Natal"
    };

    let nav = 0; 
    const calendar = document.getElementById('calGrid');
    const monthDisplay = document.getElementById('monthDisplay');
    const yearDisplay = document.getElementById('yearDisplay');
    const holidayListContainer = document.getElementById('holidayList');

    const dayNames = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

    function loadCalendar() {
      const dt = new Date();
      if (nav !== 0) dt.setMonth(new Date().getMonth() + nav);

      const day = dt.getDate();
      const month = dt.getMonth();
      const year = dt.getFullYear();

      const firstDayOfMonth = new Date(year, month, 1);
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      const paddingDays = firstDayOfMonth.getDay();

      monthDisplay.innerText = monthNames[month];
      yearDisplay.innerText = year;
      calendar.innerHTML = '';
      holidayListContainer.innerHTML = '';

      // Padding Days
      for(let i = 0; i < paddingDays; i++) {
        const daySquare = document.createElement('div');
        daySquare.classList.add('cal-date', 'empty');
        calendar.appendChild(daySquare);
      }

      const currentMonthHolidays = [];

      // Main Grid Loop
      for(let i = 1; i <= daysInMonth; i++) {
        const daySquare = document.createElement('div');
        daySquare.classList.add('cal-date');
        daySquare.innerText = i;

        const currentDayOfWeek = new Date(year, month, i).getDay();
        const isSunday = currentDayOfWeek === 0;
        const holidayKey = `${month}-${i}`;
        const holidayName = holidays[holidayKey];
        const isHoliday = holidayName !== undefined;

        if(isHoliday) currentMonthHolidays.push({ date: i, name: holidayName });

        if (isSunday || isHoliday) daySquare.classList.add('is-holiday');

        const today = new Date();
        if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
          daySquare.classList.add('today');
        }

        if (isHoliday) {
            const dot = document.createElement('div');
            dot.classList.add('cal-dot');
            daySquare.appendChild(dot);
        }

        calendar.appendChild(daySquare);
      }

      // Holiday List Render
      if (currentMonthHolidays.length > 0) {
          currentMonthHolidays.forEach(h => {
              const item = document.createElement('div');
              item.className = 'holiday-item';
              item.innerHTML = `<div class="h-date-box">${h.date}</div><div class="h-name">${h.name}</div>`;
              holidayListContainer.appendChild(item);
          });
      } else {
          holidayListContainer.innerHTML = '<div class="no-holiday">Tidak ada hari libur nasional bulan ini.</div>';
      }
    }

    function changeMonth(val) {
      nav += val;
      loadCalendar();
    }

    document.addEventListener("DOMContentLoaded", loadCalendar);
  </script>
</div>

Hasil Akhir & Demo

Setelah mengikuti langkah-langkah di atas, Anda akan memiliki halaman khusus yang menampilkan kalender fungsional. Untuk melihat bagaimana tampilan dan cara kerja widget ini secara langsung sebelum Anda memasangnya, silakan klik tombol demo di bawah ini.