Birçok HTML Takvim Eğitimi temel konulara odaklanır: basit işaretleme ve stil ile oluşturulmuş statik bir aylık ızgara. Ancak canlı bir web sitesi takvimi için gezinme, duyarlı tasarım ve etkinlik desteği gibi özelliklere genelde ihtiyaç duyarsınız ki ziyaretçiler gerçekten etkileşime geçsin ve güncel kalsın.
Bu makale, web sitenize HTML takvimi eklemenin dört yaklaşımını ele alıyor: CSS Grid ile sabit bir ay görüntüsü oluşturmak, dinamik gezinme için JavaScript eklemek, Google Takvim’i iframe olarak gömmek ve kod gerektirmeyen bir takvim aracı kullanmak. Her yöntem farklı bir duruma uyar; sonunda yer alan karar çerçevesi ise doğru olanı sizin için eşlemenize yardımcı olur.
- CSS Grid ile yapıştırmaya hazır HTML takvim kodu — statik ve dinamik sürümler
- Saf JavaScript ile ay gezinmesi ve bugünün vurgulanması nasıl eklenir
- Google Takvim Gömme Kurulumu ve mobildeki sınırlamaları
- Kod yazmadan takvim widget kurulumu, etkinlik yönetimi ve filtreleme
- Takvim Yöntemlerini Belirli Kullanım Durumlarına Uygun Eşleyen Karar Çerçevesi
Kıyaslanan Yöntemler
Bir yaklaşımı benimsemeden önce hızlı bir karşılaştırma seçeneklerinizi daraltmaya yardımcı olur. Dört yöntem yapabildiklerine, ne kadar kurulum gerektirdiğine ve kimin için tasarlandıklarına göre farklılık gösterir:
| Yöntem | Kullanım Alanı | Zorluk | Özelleştirme | Dinamik Etkinlikler | Maliyet |
|---|---|---|---|---|---|
| Statik HTML/CSS | Görüntüleme için yalnızca ay ızgarası | Basic (copy-paste) | Tam (Kendi CSS’inizle) | Hayır | Ücretsiz |
| Dinamik JS Takvimi | Gezinebilir ay takvimi | Orta Seviye | Tam (kendi kodunuz) | Ay geçişi | Ücretsiz |
| Google Takvim Gömme | Google Takvimi Kullanan Kuruluşlar | Kolay (iframe) | Çok sınırlı | Evet (Google ile senkronize eder) | Ücretsiz |
| Kod Gerektirmeyen Widget | Etkinlik listeleri, filtreleme, RSVP bağlantıları | Kolay (kod gerektirmez) | Tam (görsel düzenleyici) | Evet (manuel + Google senkronizasyonu) | Ücretsiz – Ücretli |
Çıkarım: Statik HTML/CSS takvimi, portföyler, programlar veya tasarım öğeleri gibi basit görsel düzenler için iyi çalışır. JavaScript eklemek, ay gezinmesini ve otomatik tarih görüntülemeyi sağlar. Zaten Google’da etkinlikleri yönetiyorsanız ve hızlı, bakımı kolay bir görüntüleme istiyorsanız Google Takvim gömme iyi bir seçenek olur. Kod Gerektirmeyen bir HTML takvim aracı ise daha fazla esneklik sunar; etkinlik yönetimi, yinelenen etkinlikler, filtreleme ve görsel özelleştirme gibi özellikler içerir.
Yöntem 1: Statik HTML/CSS Takvimi
Bu, inşa edebileceğiniz en basit HTML takvim kodudur — CSS Grid kullanılarak tek ay görünümü. Bu, Yöntem 2’nin temelini oluşturur ve yalnızca görsel bir ay düzenine ihtiyacınız varsa bağımsız bir şablon olarak çalışır.
Kod, yedi sütunlu gün düzeni için repeat(7, 1fr) ile CSS Grid kullanır. Grid yaklaşık olarak %95 global tarayıcı desteğine sahiptir; uyumluluk endişesi yok. Eski iş akışlarında kullanımdan kaldırılmış cellspacing ve bgcolor öznitelikleri olan HTML tablolarının kullanıldığı durumların aksine, Grid temiz ve modern bir işaretleme ile duyarlı bir düzen sunar.
Aşağıdaki kodu kopyalayın ve herhangi bir HTML dosyasına ya da CMS kod bloğuna yapıştırın. Bu, Haziran 2026 takvimini görüntüler — farklı bir ay göstermek için ay başlığını ve gün sayılarını değiştirin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static HTML Calendar</title>
<style>
.calendar {
--accent: #2563eb; /* change this to match your brand */
max-width: 480px;
margin: 0 auto;
font-family: system-ui, sans-serif;
}
.calendar-header {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
gap: 2px;
text-align: center;
}
.day-name {
padding: 0.5rem 0;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.day {
padding: 0.6rem 0;
font-size: 0.95rem;
border-radius: 6px;
}
.day:hover { background: #f1f5f9; }
.today {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.today:hover { background: var(--accent); }
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">June 2026</div>
<div class="calendar-grid">
<span class="day-name">Mon</span>
<span class="day-name">Tue</span>
<span class="day-name">Wed</span>
<span class="day-name">Thu</span>
<span class="day-name">Fri</span>
<span class="day-name">Sat</span>
<span class="day-name">Sun</span>
<!-- June 2026 starts on Monday — no offset needed -->
<span class="day today">1</span>
<span class="day">2</span><span class="day">3</span><span class="day">4</span>
<span class="day">5</span><span class="day">6</span><span class="day">7</span>
<span class="day">8</span><span class="day">9</span><span class="day">10</span>
<span class="day">11</span><span class="day">12</span><span class="day">13</span>
<span class="day">14</span><span class="day">15</span><span class="day">16</span>
<span class="day">17</span><span class="day">18</span><span class="day">19</span>
<span class="day">20</span><span class="day">21</span><span class="day">22</span>
<span class="day">23</span><span class="day">24</span><span class="day">25</span>
<span class="day">26</span><span class="day">27</span><span class="day">28</span>
<span class="day">29</span><span class="day">30</span>
</div>
</div>
</body>
</html>'></html>Üstteki --accent CSS özel özelliği vurgu rengini kontrol eder — bir kez değiştirin, başlık ve bugün işareti otomatik olarak güncellenir. Düzen, mevcut alanı eşit olarak bölen 1fr birimleri sayesinde varsayılan olarak duyarlıdır ve sabit piksel genişlikler kullanmaz. Daha küçük ekranlarda hücreler bozulmadan orantılı şekilde küçülür.
Görüntülediğiniz ay Pazartesi ile başlamıyorsa, doğru sütuna taşıması için ilk gün hücresinde grid-column-start kullanın. Örneğin ay Çarşamba ile başlıyorsa, ilk <span class="day"> öğesine style="grid-column-start: 3" ekleyin. Boş yer tutucu hücrelere ihtiyaç duymadan ilk günü üçüncü sütuna konumlandırır — bu, CSS Grid’in tablo tabanlı yerleşimine göre bir avantajdır.
Yöntem 2: Dinamik JavaScript Takvimi
Statik sürüm bir anlık görüntü olarak çalışır; ancak çoğu pratik kullanım için ay gezinmesi ve otomatik olarak oluşturulan mevcut tarih gerekir. Bu sürüm, aynı CSS Grid yapısını temel alır ve dinamik görüntüleme için yaklaşık 50 satır vanilla JavaScript ekler.
Aşağıdaki takvim HTML kodu geçerli ayı ve yılı algılar, doğru gün sayısını oluşturur, ayın ilk gününü doğru sütuna yerleştirir, bugünü belirginleştirir ve ziyaretçilere aylar arasında ileri-geri gezinme imkanı sunar. Yıl geçişi (Aralık’tan Ocak’a veya Ocak’tan Aralık’a) otomatik olarak yönetilir.
İzlenmesi gereken iki JavaScript detayı. Birincisi, new Date(year, month, 1).getDay() ayın ilk gününün haftanın hangi günü olduğunu döndürür; fakat JavaScript’te Pazar sıfırdır. (firstDay + 6) % 7 dönüşümü, indeksin Pazartesi=0 ve Pazar=6 olacak şekilde kaydırır; bu da tablonun Pazartesi başlangıçlı düzeniyle uyumludur. İkincisi, new Date(year, month + 1, 0).getDate(), herhangi bir ayın gün sayısını elde etmenin kısaltmasıdır — bir sonraki ayın 0. günü mevcut ayın son gününü verir.
Takvim JavaScript’inde sık yapılan bir hata, ayların 0 tabanlı olduğunu unutmaktır. Ocak 0dır, 1 değildir. Takviminiz yanlış ay gösteriyorsa bu neredeyse tek nedendir. Gezinti işleyicileri ayrıca yılın geçişini açıkça ele almalıdır — Ocak’tan geriye gidildiğinde ay Aralık olarak ayarlanmalı ve bir yıl düşürülmelidir.
Yöntem 3: Google Takvim Gömme
Kuruluşunuz Google Takvimi ile programını yönetiyorsa, bunu iframe olarak gömmek tamamen kodlama adımını atlar. Sonuç, Google Takvimi’nde etkinlik eklediğinizde veya değiştirdiğinizde otomatik olarak güncellenen canlı bir HTML etkinlik takvimi olur.
Kurulum Süreci
- Takvimi herkese açık yapın. Google Takvim’de, gömme için takvimin Ayarlarına gidin. Etkinlikler için erişim izinleri altında “Herkese açık olarak kullanılabilir” işaretini seçin. Gömmede yalnızca herkese açık takvimler görüntülenir; özel veya paylaşılan takvimler görüntülenmez.
- Gömme ayarlarını açın. Aynı ayarlar panelinde “Takvimi Entegre Et” bölümüne kaydırın. Özelleştirme aracını açmak için “Özelleştir” düğmesine tıklayın.
- Görüntüyü yapılandırın. Özelleştirme aracı başlığı, varsayılan görünüm (Ay, Hafta veya Ajanda), piksel cinsinden genişlik ve yükseklik, başlangıç tarihi, zaman dilimi ve gezinti düğmeleri, tarih başlığı, yazdır simgesi ve takvim sekmeleri gibi öğeleri açıp kapatma seçeneklerini sunar. Ayrıca birden çok genel takvimi tek bir gömme içinde birleştirebilirsiniz.
-
iframe kodunu kopyalayın. Gömülü iframe kodunu almak için “Kopyala” düğmesine tıklayın. Aşağıdaki gibi görünecek:
<iframe src="https://calendar.google.com/calendar/embed?src=..." width="800" height="600"></iframe> - Web sitene yapıştır. iframe’i herhangi bir HTML sayfasına veya CMS Özel HTML bloğuna ekleyin. Daha ayrıntılı bir rehber için, platforma özel yapıştırma talimatlarını da içeren bu kılavuzu inceleyin: Google Takvimini herhangi bir web sitesine ekleme kılavuzu.
Tavizler
Bir Google Takvim Gömmesi, hızlı ve ücretsiz bir takvim görüntülemesi için iyidir, ancak bazı kısıtlamaları vardır. iframe sabit boyutlar kullanır ve tamamen duyarlı değildir, bu da mobil görüntülemeyi zorlaştırabilir.
Google takvimi üzerinden yüklendiği için kendi CSS veya JavaScript’inizle tasarımı tamamen özelleştiremezsiniz; bu nedenle her zaman gömülü bir Google ürünü gibi görünür. Ziyaretçiler etkinlikleri görüntüleyebilir ve ayrıntıları açabilir, ancak etkileşim yalnızca görüntülemeyle sınırlı kalır; doğrudan rezervasyon veya RSVP yapılamaz.
Yöntem 4: Kod Gerektirmeyen Takvim Widget’ı
Kod yazmadan etkinlik yönetimi, görsel özelleştirme ve duyarlı tasarım gerektiğinde, özel bir takvim widget’ı temel HTML takvimi ile tam özellikli bir takvim uygulaması arasındaki boşluğu kapatır. Bu kategorideki bir seçenek olan Elfsight Etkinlik Takvimi sadece 5 dakikada kuruluyor. İşte süreç hızlıca:
- editorand select a template.”>Takvimi düzenleyici açın ve bir şablon seçin.
- Etkinliklerinizi ekleyin ve görünümü özelleştirin.
- “Web sitesine ekle”ye tıklayın ve gömme kodunu kopyalayın.
- Kodu web sitenizin arka ucuna yapıştırın ve yayımlayın.
Etkileşimli görsel düzenleyicide kendi Takviminizi hemen buradan oluşturun ↓
Öne Çıkan Özellikler
Aşağıdaki her şey, elle yazılan HTML/JS takvimin kutudan çıktığında sunmadığı işlevlerdir — baştan geliştirmek ise önemli bir zaman alır.
- Yedi Düzen Türü — Liste, Izgara, Masonry, Slayt ve Ay, Hafta ve Gün takvim görünümleri. Tek bir widget, farklı sayfalarda farklı düzenler gösterebilir.
- Üç etkinlik kaynağı — görsel bir düzenleyiciyle manuel olarak etkinlik ekleyin, CSV ile toplu içe aktarın veya Google Takvim’den tek yönlü senkronizasyon yapın (mekan, ev sahibi, etiketler, etkinlik türü vb. desteklerle).
- Tekrarlayan Etkinlikler — günlük, haftalık, aylık, yıllık ve özel frekanslar için bireysel olaylarda istisna yönetimi.
- Etkinlik açılır pencereleri — ziyaretçiler bir etkinliğe tıklayarak tam ayrıntıları, bir konum haritası, CTA düğmesi ve “Takvime Ekle” seçeneğini görür; evrensel bir .ics dosyası üretir.
- Beş filtre + arama — tarih, etkinlik türü, mekan, ev sahibi ve etiketler, ayrıca bir anahtar kelime arama çubuğu. Filtreler satır içi olarak veya açılır menüde görüntülenir.
- Ziyaretçi Saat Dilimi Ayarı — Etkinlik saatleri ziyaretçinin kendi yerel saat dilimine otomatik olarak uyum sağlar; sanal veya farklı saat dilimlerinde gerçekleşen etkinlikler için önemlidir.
WordPress, Shopify, Squarespace, Wix, Webflow ve özel HTML bloğu destekleyen herhangi bir platformda çalışır. Tam adım adım kurulum için, web siteniz için bir etkinlik takvimi oluşturma kılavuzu bu işlemi ayrıntılı olarak ele alıyor.
Durumunuza Uygun Yöntem Hangisi?
Doğru yöntem, takviminizin ne yapması gerektiğine bağlıdır, ne kadar teknik olduğunuzla ilgili değildir. Aşağıdaki tablo, yaygın senaryoları her biri için en uygun yaklaşım ile eşleştirir.
| Durum | En İyi Yöntem | Neden |
|---|---|---|
| Bir ay görünümüne ihtiyaç duyan portföy veya kişisel web sitesi | Statik HTML/CSS | Tam tasarım kontrolü, bağımlılık yok, minimum kodla |
| Etkinlik içermeyen gezinebilir bir takvime ihtiyaç duyan web sitesi | Dinamik JS Takvimi | Ay gezinmesi ve bugünün işaretlenmesi — arka uç olmadan |
| Zamanlama için Google Takvim’i zaten kullanan bir kuruluş | Google Takvim Gömme | Otomatik senkronizasyon, kod yazmadan, bakım gerektirmez |
| Etkinlik mekanı, spor salonu, okul veya kilise için etkinlik listelerini yayınlama | Kod Gerektirmeyen Widget | Etkinlik yönetimi, filtreleme, yinelenen etkinlikler, CTA düğmeleri |
| Özel takvim uygulaması geliştiren geliştirici | JS kütüphanesi (FullCalendar, vb.) | Sürükle ve bırak, yinelenen etkinlik kuralları, API desteği |
| İndirim veya lansman tarihlerini gösteren e-ticaret sitesi | Statik HTML/CSS veya geri sayım widget’ı | Tam bir takvim çoğu zaman gereksiz — basit bir tarih görüntülemesi yeterli. |
| Kullanılabilirlik durumunu gösteren serbest çalışan ya da danışman | Kod Gerektirmeyen Widget veya Randevu Aracı | Kullanılabilirlik görüntüsü için sadece bir ızgara yeterli değil; planlama mantığı gerekir |
Bir takvimi kodlamak ile bir araç kullanmak arasındaki sınır genelde etkinlik yönetimine bağlıdır. Aylık gezinmeyi destekleyen temel bir JavaScript takvimi nispeten basittir; ancak yinelenen etkinlikler, Google Takvim eşitlemesi, zaman dilimi yönetimi, filtreleme veya RSVP bağlantıları gibi özellikler kapsamı hızla genişletir. Bu noktada bir widget veya takvim kütüphanesi genellikle daha pratik ve zaman kazandıran bir seçenek olur.
30’dan Fazla Etkinlik Takvimi Şablonu Keşfedin
JavaScript Takvim Kütüphaneleri
Vanilla JavaScript yeterli değilse ama kodsuz bir widget sizin geliştirme zincirinizle uyumlu değilse, arada kalan birkaç açık kaynak kütüphane var. Bunlar, etkinlik desteğine sahip önceden oluşturulmuş takvim bileşenleri sunar ve entegrasyonu sizin kontrolünüzde tutmanıza olanak verir.
| Kütüphane | Ana Güç | Boyut / Benimseme | Lisans |
|---|---|---|---|
| FullCalendar | Kapsamlı Etkinlik Yönetimi, sürükle-bırak desteği, eklenti sistemi | 19k+ GitHub Yıldızları, 1M+ npm Haftalık İndirmeler | MIT (Standart) |
| TUI Calendar | Çoklu takvim desteği, güçlü Asya localization | 8.2k GitHub Yıldızları | MIT |
| Vanilla Calendar Pro | Hafif, bağımlılıksız, yerleşik Erişilebilirlik | Hafif / büyüyen | MIT |
| Etkinlik Takvimi (vkurko) | 37kb sıkıştırılmış FullCalendar benzeri API | Svelte tabanlı, framework bağımsız | MIT |
FullCalendar, olay yönetimi, yinelenen etkinlikler ve çerçeve desteği (React, Vue, Angular) ile üretime hazır bir takvim API’ine ihtiyaç duyan geliştiriciler için varsayılan öneridir. Daha basit ihtiyaçlar için Vanilla Calendar Pro, yerleşik ARIA etiketleri, klavye navigasyonu ve daha küçük bir ayak izi sunar.
Erişilebilirlik ve Mobil İpuçları
HTML’de bir takvim nasıl oluşturulur konusundaki çoğu rehber Erişilebilirliği tamamen atlar. Takvim kodunuza birkaç öznitelik eklemek, ekran okuyucularına ve yalnızca klavye kullanan ziyaretçilere kullanılabilirlik sağlar; bu çaba, etkiye kıyasla minimum düzeydedir.
Yöntem 1 ve 2’deki kod tabanlı takvimler için bunlar temel bilgileri kapsar:
- Takvim ızgarası kapsayıcısına aria-label=”June 2026”yi ekleyin (veya mevcut ay/yıl) ve ekran okuyucuların takvimin ne gösterdiğini duyurmasını sağlar
- Gün adına başlıklarında abbr özniteliğini kullanın: <span class=”day-name” abbr=”Wednesday”>Wed</span>. Ekran okuyucular, kısaltma yerine tam gün adını duyurabilir
- İnteraktif JavaScript takvimi için ızgara kapsayıcısına role=”grid” ve her gün hücresine role=”gridcell” ekleyin. W3C APG Tarih Seçici Deseni tam etkileşim modelini tanımlar; günler arasında ok tuşu navigasyonu ve ay değişiklikleri için Page Up/Down dahil
- Geçerli tarihi, aria-current=”date” ile işaretleyin; ayrıca görsel .today sınıfını kullanın.
ARIA Uyarısı
ARIA ile ilgili bir uyarı: Anladığınız öznitelikleri ekleyin. En çok ziyaret edilen bir milyon web sayfasının analizi ARIA kullanan sayfaların ortalama 59.1 tespit edilebilir erişilebilirlik hatasına sahip olduğu, ARIA olmayan sayfalarda ise 42 hata bulunduğu tespit edilmiştir. Yanlış ARIA işaretlemesi, hiç ARIA kullanmamaktan daha fazla engel yaratır.
Görüntüleme amacıyla bir takvim oluşturuyorsanız, düzgün <table> ve uygun <th> başlıkları ile yerel HTML tablo varsayılan olarak en erişilebilir seçenektir — ARIA’nın ilk kuralı, mevcutsa yerel HTML semantiğini kullanmaktır.
Mobil için CSS Grid
Mobilde, her iki yöntemde de CSS Grid kodu varsayılan olarak duyarlıdır çünkü <code>fr</code> birimleri mevcut alanı orantılı olarak böler. Çok küçük ekranlarda (360px’in altında) iki ayarlama yardımcı olur: gün adlarını tek harfe kısaltın (ör. M, S, Ç, P, C, C, P) ve hücre dolgusunu 0.35rem olarak küçültün. Yayınlamadan önce gerçek bir cihazda test edin — emülatörler küçük boyutlarda dokunmatik hedeflerin nasıl hissettirdiğini her zaman yansıtmayabilir.
Sıkça Sorulan Sorular
JavaScript olmadan HTML takvimi kurabilir miyim?
Bir takvim düzeni için CSS Grid mi, yoksa HTML tablo mu daha iyi?
HTML takvimini mobilde nasıl duyarlı hale getirebilirsiniz?
Arka uç olmadan HTML takvimine etkinlik ekleyebilir miyim?
HTML takvimi ile bir takvim widget’ı arasındaki fark nedir?
Nereden Başlamalı
Takviminizin ne yapması gerektiğine bağlı olarak en uygun yaklaşım değişir. Bu makaledeki kodla yalnızca görüntüleyen bir ay düzeni 30 dakika sürer. Bugünün vurgulanmasıyla gezinebilir bir takvim ise biraz daha uzun sürer. Filtreleme, tekrarlayan etkinlikler ve RSVP bağlantıları içeren bir etkinlik takvimi ise tamamen farklı bir araç gerektirir — ve bu sınırı erkenden fark etmek, ne kadar kod optimizasyonu yaparsanız yapın daha çok zaman kazandırır.
İhtiyaçlarınızı karşılayan en basit yöntemle başlayın. Büyüdükçe, sonraki adım netleşir: sıfırdan yeniden inşa etmeden ekleyebileceğiniz bir takvim widget’ı veya tam programatik kontrol için bir JavaScript kütüphanesi. Her iki durumda da işi karşılayan bir temelde ilerliyorsunuz — basit bir HTML takviminin hiç tasarlanmadığı bir işi yapmaya zorlamadan.
