CSS3 & jQuery ile Interaktif Takvim

25 Şubat 2013 tarihinde yayınlandı

Css3′ün birkaç yaygın özelliğini kullanarak, resim kullanmadan interaktif bir Duvar takvimi hazırladım. Bu takvimin css3 & jquery kodlanma sürecini bu makalede anlatarak, çok basit bir iki komutla neler yapabileceğimizi göstermeye çalışacağım. Çalışma sonunda tüm dosyaları indirebilir, linkten de demo Takvimi görüntüleyebilirsiniz. Anlaşılır bir dille yazmaya özen gösterdim, umarım faydalanırsınız.

Yapılacakları belirleyelim Aşama-1

Basit bir duvar takvimi olacağı için ister siz de çizebilirsiniz, isterseniz benim gibi hazır bir tasarımda kullanabilirsiniz. Ben iconfinder’den butakvimi örnek aldım kodlarken.

Masa takviminde özellikle css3 le yapacağımız kısımlar, demo çalışmaya bakarsanız Takvimi tutan 2 kanca var. Bu kancaları resim kullanmadan yapacağız. Yine background’da bazı efektler var onlarda aynı mantıkla kodlanacak.

Takvim de aylar arası geçişi de yapmalıyız. css3 ile biraz zor ama yapılabilir ben yapabildiğim kadarıyla örnek çalışmada yaptım. Beyaz butona tıkladığınızda Transform yaparak Ocak ayını yan tarafa atıyor, şubat ayı görünür oluyor. Flip efekti vermek için çok sayıda jquery eklentisi var. Fakat bu efektte sadece transform kullanarak benzetmeye çalıştım.

Javascript ve jquery ile bazı basit işlemler yapacağız. For döngüsüyle ay sayılarını, bir ayda kaç gün olduğunu, mevcut Ay sınıflarına yerleştireceğiz. Örnek çalışma da sadece Ocak ve Şubat aylarını ekleyeceğiz.

Aşama-2

Bu aşama da takvimin daha çok görünüm(html css) üzerine detaylandıracağız. Ben her zaman ilk olarak HTML’i kodlarım. Bu yüzden HTML ile başladım. Takvimi incelediğimizde bizim temelde 2 ana kapsayıcıya ihtiyacımız var. Birisi tepe kısım(.takvim_head) diğeri de hem tepe kısmı kapsayan hem de günlerin listeleneceği içerik kısmını kapsayan olacak(#takvim).

.takvim_head içinde takvimi tutan 2 kanca ve içinde ki 2 yuvarlak yer alacak.
Görünüm;

2 kancaya ihtiyacımız var bu yüzden 2 farklı ID oluşturalım. (Tek ID ile de yapılabilir.)
1. Kanca = #cubuk
2. Kanca = #cubukSol (daha fazla…)