Cara Menampilkan Google Calendar di Blogger Secara Responsif

Google Calendar masih dapat disematkan ke website atau Blogger menggunakan kode embed. Cara resminya sekarang dilakukan dari Google Calendar versi web melalui menu Setelan → Integrasikan kalender.

Cara Mendapatkan Kode Embed Google Calendar

1. Buka Google Calendar di komputer.
2. Klik Setelan.
3. Pilih kalender yang ingin ditampilkan.
4. Buka Integrasikan kalender.
5. Di bagian Kode sematan, klik Sesuaikan bila perlu.
6. Salin kode iframe.

Penting: kalender hanya akan terlihat oleh pengunjung sesuai pengaturan berbagi. Jika ingin dapat dilihat publik, atur kalender tersebut sebagai kalender publik.

Membuat Embed Responsif di Blogger

<div class="mc-calendar">
  <iframe
    src="URL-EMBED-GOOGLE-CALENDAR"
    frameborder="0"
    scrolling="no"
    loading="lazy"></iframe>
</div>
<style>
.mc-calendar{
  width:100%;
  overflow:hidden;
  border-radius:10px;
}
.mc-calendar iframe{
  display:block;
  width:100%;
  min-height:600px;
  border:0;
}
@media(max-width:600px){
  .mc-calendar iframe{min-height:520px}
}
</style>

Cara Pasang di Blogger

1. Buka Tata Letak atau halaman Blogger.
2. Tambahkan HTML/JavaScript.
3. Tempel wrapper di atas.
4. Ganti URL-EMBED-GOOGLE-CALENDAR dengan URL dari kode embed milik Anda.
5. Simpan.

Kalender Hari Libur Indonesia

Daripada hardcode ID kalender lama dari artikel 2014, lebih aman menambahkan kalender hari libur Indonesia melalui akun Google Calendar Anda, lalu mengambil embed dari konfigurasi kalender yang aktif saat ini.

Panduan resmi Google Calendar untuk embed kalender