Generator Embed Google Calendar

Embed Google Calendar publik di situs web Anda dengan tampilan, zona waktu, dan kontrol pilihan Anda. Gratis, tanpa pendaftaran.
Generator Embed Google Calendar
ID kalender, tautan berbagi atau embed, atau alamat iCal, satu per baris, misalnya team@example.com. Tambahkan warna seperti #039BE5 setelahnya.Ingin acara dengan foto, filter, dan desain Anda sendiri?

Embed kalender

<div style="position:relative;width:100%;max-width:800px;aspect-ratio:4 / 3;">
  <iframe src="https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&amp;showPrint=0&amp;showCalendars=0" title="Google Calendar" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Dibuat dengan <a href="https://elfsight.id/tools/google-calendar-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

Tips: di ponsel, tampilan Agenda lebih mudah dibaca daripada Bulan.

  1. Klik Salin kode di atas untuk menyalinnya.
  2. Buka file HTML atau template halaman Anda.
  3. Tempel kode di dalam <body>, di tempat konten akan muncul.
  4. Simpan dan unggah halaman, lalu buka di browser untuk memeriksanya.

Ingin acara dengan foto, filter, dan desain Anda sendiri? Coba widget Event Calendar. Lihat Event Calendar →

Sebelum Anda pergi

Ingin acara dengan foto, filter, dan desain Anda sendiri? Coba widget Event Calendar.

Lihat Event Calendar →
Atau bagikan alat gratis ini:
Widget Event Calendar

Promosikan setiap acara dalam satu kalender

Kalender Anda menjadi pusat yang menampilkan setiap acara kepada lebih banyak pengunjung. Tambahkan lokasi, penyelenggara, dan detail di editor yang sederhana, lalu biarkan pengunjung menemukan acara yang tepat dan bergabung.

  • Semua acara Anda di satu tempat

  • Lokasi, penyelenggara, dan detail acara

  • Template siap pakai atau desain Anda sendiri

Buat widget gratis
Tanpa kartu kredit
Pelajari Event Calendar

Generator vs kode Integrate calendar milik Google Calendar

Google Calendar memiliki kode embed sendiri di pengaturan setiap kalender. Generator ini membuat kode sejenis dari sebuah tautan, sehingga Anda tidak perlu membuka pengaturan kalender.
Kode Integrate calendar milik Google Calendar
Generator ini
Tempat mendapatkan kode
Settings → kalender Anda → Integrate calendar, di komputer
Di sini, dari tautan ke kalender
Titik awal Anda
Halaman pengaturan kalender, setelah masuk ke Google
Tautan kalender publik, tautan embed, atau alamat iCal publik
Beberapa kalender
Kode dibuat dari pengaturan satu kalender
Tambahkan beberapa kalender dan beri masing-masing warna sendiri
Opsi tampilan
Diatur di layar Customize
Opsi yang sama dalam bentuk tombol: tampilan, zona waktu, awal minggu, bahasa, apa yang ditampilkan
Akses publik
Hanya orang yang Anda beri akses yang melihat kalender sampai Anda menjadikannya publik
Aturan yang sama: kalender harus publik agar pengunjung dapat melihat acara

Tempat mendapatkan kode

Kode Integrate calendar milik Google Calendar

Settings → kalender Anda → Integrate calendar, di komputer

Generator ini

Di sini, dari tautan ke kalender

Titik awal Anda

Kode Integrate calendar milik Google Calendar

Halaman pengaturan kalender, setelah masuk ke Google

Generator ini

Tautan kalender publik, tautan embed, atau alamat iCal publik

Beberapa kalender

Kode Integrate calendar milik Google Calendar

Kode dibuat dari pengaturan satu kalender

Generator ini

Tambahkan beberapa kalender dan beri masing-masing warna sendiri

Opsi tampilan

Kode Integrate calendar milik Google Calendar

Diatur di layar Customize

Generator ini

Opsi yang sama dalam bentuk tombol: tampilan, zona waktu, awal minggu, bahasa, apa yang ditampilkan

Akses publik

Kode Integrate calendar milik Google Calendar

Hanya orang yang Anda beri akses yang melihat kalender sampai Anda menjadikannya publik

Generator ini

Aturan yang sama: kalender harus publik agar pengunjung dapat melihat acara

Parameter embed

Embed berupa satu alamat, https://calendar.google.com/calendar/embed?…, dengan parameter berikut setelah ?. Tombol tampilkan/sembunyikan menerima 1 atau 0; semuanya ditampilkan secara default.
Opsi
Fungsinya
Nilai
Catatan
src
Kalender yang ditampilkan
ID kalender, misalnya you@gmail.com atau …@group.calendar.google.com
Ulangi src untuk menggabungkan beberapa kalender.
color
Warna acara dari kalender sebelumnya
Hex dengan # yang di-encode: %23D50000
Letakkan color tepat setelah setiap src. Tanpa %23, warna diabaikan.
ctz
Zona waktu tempat acara ditampilkan
Nama zona waktu, misalnya America/New_York
Tanpa ini, acara ditampilkan dalam zona waktu kalender itu sendiri, bukan zona waktu pengunjung.
mode
Tampilan awal
MONTH (default), WEEK, AGENDA
AGENDA adalah daftar acara mendatang dan paling nyaman dibaca di layar sempit.
showTitle, showNav, showDate
Judul kalender, tombol sebelumnya/berikutnya dan Hari ini, rentang tanggal saat ini
1 atau 0
Tanpa tombol navigasi, pengunjung hanya dapat berpindah tanggal dengan pintasan keyboard.
showPrint, showTabs, showCalendars, showTz
Ikon cetak, pengganti tampilan, daftar kalender, baris “Acara ditampilkan dalam zona waktu”
1 atau 0
Biarkan showTz aktif jika pengunjung Anda berada di zona waktu lain.
wkst
Hari pertama dalam seminggu
1 Minggu, 2 Senin, 7 Sabtu
—
hl
Bahasa antarmuka kalender
Kode bahasa, misalnya en, de, es
Judul acara tetap seperti yang Anda tulis.
bgcolor
Warna latar belakang
Hex dengan %23, misalnya %23FFFFFF
Mungkin tidak berpengaruh secara kasatmata pada desain embed saat ini.

src

Fungsinya

Kalender yang ditampilkan

Nilai

ID kalender, misalnya you@gmail.com atau …@group.calendar.google.com

Catatan

Ulangi src untuk menggabungkan beberapa kalender.

color

Fungsinya

Warna acara dari kalender sebelumnya

Nilai

Hex dengan # yang di-encode: %23D50000

Catatan

Letakkan color tepat setelah setiap src. Tanpa %23, warna diabaikan.

ctz

Fungsinya

Zona waktu tempat acara ditampilkan

Nilai

Nama zona waktu, misalnya America/New_York

Catatan

Tanpa ini, acara ditampilkan dalam zona waktu kalender itu sendiri, bukan zona waktu pengunjung.

mode

Fungsinya

Tampilan awal

Nilai

MONTH (default), WEEK, AGENDA

Catatan

AGENDA adalah daftar acara mendatang dan paling nyaman dibaca di layar sempit.

showTitle, showNav, showDate

Fungsinya

Judul kalender, tombol sebelumnya/berikutnya dan Hari ini, rentang tanggal saat ini

Nilai

1 atau 0

Catatan

Tanpa tombol navigasi, pengunjung hanya dapat berpindah tanggal dengan pintasan keyboard.

showPrint, showTabs, showCalendars, showTz

Fungsinya

Ikon cetak, pengganti tampilan, daftar kalender, baris “Acara ditampilkan dalam zona waktu”

Nilai

1 atau 0

Catatan

Biarkan showTz aktif jika pengunjung Anda berada di zona waktu lain.

wkst

Fungsinya

Hari pertama dalam seminggu

Nilai

1 Minggu, 2 Senin, 7 Sabtu

Catatan

—

hl

Fungsinya

Bahasa antarmuka kalender

Nilai

Kode bahasa, misalnya en, de, es

Catatan

Judul acara tetap seperti yang Anda tulis.

bgcolor

Fungsinya

Warna latar belakang

Nilai

Hex dengan %23, misalnya %23FFFFFF

Catatan

Mungkin tidak berpengaruh secara kasatmata pada desain embed saat ini.

Bantuan Google Calendar: Menambahkan Google Calendar ke situs web Anda ↗

Jika kalender tidak menampilkan acara

Pengunjung melihat “Sign in to your Google Account”

Kalender tidak publik. Jadikan publik di pengaturan Google Calendar (langkah-langkah di bawah), lalu muat ulang halaman Anda.

Kalender kosong, padahal Anda melihat acara di Google Calendar

Periksa apakah Anda meng-embed ID kalender yang benar, dan kalender dibagikan dengan semua detail acara, bukan See only free/busy (hide details).

Waktu acara meleset beberapa jam

Embed menampilkan zona waktu kalender itu sendiri, bukan zona waktu pengunjung. Atur ctz ke zona waktu tempat acara Anda berlangsung, dan biarkan showTz aktif agar pengunjung tahu zona waktu yang dipakai.

Anda tidak menemukan Make available to public

Pada akun kantor atau sekolah, administrator Anda mungkin membatasi pembagian. Tanyakan kepada mereka, atau gunakan akun Google pribadi untuk kalender publik. Pengaturan berbagi hanya dapat diubah di komputer.

Anda menempel tautan yang mengandung private-

Itu adalah alamat iCal rahasia milik kalender, yang menurut Google tidak boleh dibagikan. Gunakan Public address in iCal format atau ID kalender sebagai gantinya.

Warna tidak diterapkan

Tulis # sebagai %23 (color=%23D50000) dan letakkan setiap color tepat setelah src-nya.

Tampilan bulan terasa sempit di ponsel

Ganti tampilan ke Agenda (mode=AGENDA): daftar acara mendatang cocok untuk layar sempit.

Jadikan kalender Anda publik: langkah demi langkah

Kalender yang di-embed hanya menampilkan apa yang diizinkan Google untuk dilihat semua orang. Selama kalender belum publik, pengunjung akan melihat permintaan masuk akun alih-alih acara Anda.

  • Buka Google Calendar di komputer. Pengaturan berbagi tidak dapat diubah di aplikasi seluler.

  • Klik ikon roda gigi di kanan atas, lalu Settings.

  • Di sebelah kiri, di bawah Settings for my calendars, klik kalender yang ingin Anda embed.

  • Di bawah Access permissions for events, centang Make available to public, lalu klik OK.

  • Pilih apakah publik melihat semua detail acara atau See only free/busy (hide details). Untuk kalender acara, tampilkan detailnya.

  • Di halaman yang sama, di bawah Integrate calendar, salin Calendar ID atau Public address in iCal format lalu tempel ke generator.

Sebelum melakukannya: kalender publik dapat ditemukan siapa saja dan mungkin muncul di hasil pencarian, dan orang dapat berlangganan kalender tersebut. Simpan rencana pribadi di kalender terpisah dan jadikan hanya kalender acara yang publik. Acara baru mengikuti visibilitas default kalender, jadi periksa sekali.

Pada akun kantor atau sekolah, opsinya mungkin tidak ada jika administrator Anda membatasi pembagian. Jika Anda kemudian mematikan pembagian publik, perubahannya bisa memakan waktu hingga 4 jam untuk berlaku.

Cara meng-embed Google Calendar

  1. Jadikan kalender publik

    Di pengaturan Google Calendar, di bawah Access permissions, aktifkan “Make available to public”.

  2. Salin Calendar ID

    Di Integrate calendar, salin Calendar ID lalu tempel di sini.

  3. Pilih tampilan

    Pilih tampilan, zona waktu, dan kontrol, lalu salin kodenya.

Pertanyaan yang sering diajukan

Generator kode embed lainnya

Generator Kode Embed YouTube

Tempel tautan YouTube apa pun dan dapatkan kode embed responsif dalam hitungan detik.Generator Kode Embed YouTube

Generator Kode Embed Video

Embed video yang di-host di mana saja: MP4, Google Drive, Dropbox, Loom, atau Wistia.Generator Kode Embed Video

Generator iFrame

Buat iframe responsif untuk halaman, formulir, atau aplikasi apa pun.Generator iFrame

Generator Embed PDF

Tampilkan menu, daftar harga, atau brosur PDF langsung di halaman.Generator Embed PDF