Merhabalar ;

Asp.Net Calendar nesnesinin etkinlik takvimi olarak nasıl kullanabiliriz? Daha detaylı nasıl erişebiliriz? gibi soruların cevabını bu makalede bulacağız.

Calendar Kontrolümüzü genellikle kullanıcılardan tarih bilgisini almak için kullanır ve daha sonra bu tarihe göre işlemler yaptırırız. Bazı sitelerde ise Etkinlik takvimi olarak da kullanabiliriz. Bu makalemizde sizlere kolayca etkinlik takvimini nasıl yapacağımızı ve CSS ile nasıl şekillendirebileceğimizi anlatacağım.

Bu makalede bulacaklarınız kısaca sıralarsak
-    CSS ile Calendar nesnesini şekillendirme
-    Calendar üzerinde herhangi bir tarih seçildiğinde ilgili tarihe ait bilgiler
-    Kullanıcıya ilgili tarihde etkinliği Bir şekilde belirtmek
-    Eventler ile Calendar nesnesinde farklı uygulamalar yapmak.

Öncelikle sayfamıza Calendar nesnesini Araç kutumuzdan sürükle bırak işlemi ile sayfamıza bıraktık. Ekledikten sonra karşımıza aşşağıdaki resimdeki gibi bir yapı çıktı. Sağ üst tarafda calendarı seçtiğimizde Mavi kutu içine aldığım alandaki gibi bir işaret çıkacaktır. O işareti tıkladığımızda calendar üzerinde yapabileceğimiz görevleri göreceksiniz. Auto Format'ı tıklattığımızda calendar nesnesinin tasarım yönünden daha güzel görünümlerine ulaşabilir ve sol tarafdaki listede seçebileceklerinizi , sağ tarafda ise önizleme halinde görebiliyoruz.

 


Burada kendimize bir CSS hazırlayarak calendar nesnesini istediğimiz şekle göre yapılandıracağız.

Öncelikle Calendar nesnesinde nereyi değiştirdiğimiz taktirde görsel olarak ne göreceğimizi belirten resmi aşşağıda inceleyebilirsiniz.
 

Resimde de gördüğünüz gibi her bir kare içine aldığım alanı temsil eden CssClass bölümü sağ tarafda o renge ait isimde belirtilmiştir.Calendar nesnemizin hangi bölümünde ilgili değişikliği yapacak isek resimdeki renklere göre CssClass içinde ilgili bölümü tasarlamalıyız.. Bu uygulamamızda style.css şeklinde bir css dosyası oluşturup orada csslerimi belirteceğim. Sizler css olarak belirtmeden den ilgili propertylere kendi barındırdığı özelliklere göre de css belirleyebilirsiniz.

Örneğin DayStyle kısmında kendi tasarladığım css dosyası ile değilde içindeki propertyler aracılığı ile de değişiklik yapabilirim. Font-Size özelliğini 10 olmasını istiyor isem <DayHeaderStyle Font-Size="10"/> yaparakda istediğimi almış olurum.

CSS ile biraz bilgi verdikten sonra uygulamamızdaki diğer özelliklere ve yapmak istediklerimize geçelim.

Calendar nesnemize ait  property sekmesindeki kategoriler ile de farklı sitilerde görünüm sağlayabiliriz.

Kısaca bahsedersek :

ShowGridLines alanı Takvimin üzerinde excel formatındaki gibi bir gridlerin gözüküp gözükmeyeceği propertydir.
DayNameFormat alanı Takvimin üst tarafında bulunan haftaya ait günlerin Full , Kısa olarak , ilk harfini veya ilk üç harfini ayarlayabileceğiniz bir propertydir.

Diğer property’leri çoğu zaman classlar aracılığı ile yada çalışma anında da görebilir ve üzerinde değişiklikler yapabilirsiniz.

 

Oluşturduğum Css ile bilgi vermektense şuan görünüm itibari ile herhangi bir kod yazmadan takvimimizin şeklini yukarıdaki resimden görebilirsiniz.Yaptığım örneğe baktığımızda hafta sonlarını , hafta içi o aya ait günleri ve geçen-gelecek aylara verdiğim arkaplan resimleri ve o anki aktif ayı belirten yazının css ni hepsini kendim belirtim. Takvim’e baktığımızda hoş bir görüntü elde edildiğini sizlerde farkediyorsunuz. Dolayısı ile CSS ‘in bu denli önemli olduğunu bir kere daha anlıyoruz.

İlk örneğimiz ufak bir uygulamada sadece aktif bulunan ayda herhangi bir etkinlik var ise bunu kullanıcıya bir şekilde belirtmek olacak. Dolayısı ile birazcık kod yazma zamanı geldi.

Öncelikle Takvimde bulunan günlerimiz arasında tek tek dolaşarak o güne ait etkinlik olup olmadığını kontrol edeceğiz ki kullanıcıya bunu belirtelim. Bunu kontrol etmemizi sağlayacak event ise DayRender isimli event’dir. Excel de hücreleri nasıl kontrol edebiliyorsak tek tek ya da bir tabloda bulunan hücrelere müdehale edebilmemiz gibi bu event sayesinde takvimdeki tüm hücrelere erişip kontrol edeceğiz.

Yapmaya başladığımız örnekte ilk olarak Etkinliğimizi göstereceğimiz sayfaya Etkinlik ile ilgili tarih’i QueryString yardımı ile gönderip orada eğer gelen Tarihde bir etkinlik(ler) var ise onları farklı kontroller yardımı ile listeleyebiliriz. Bunu yapabilmemiz için öncelikle SelectionChanged event’inden bahsedeyim. Bu event sayesinde kullanıcı Calendar üzerinde bir günü seçmesi dahilinde çalışarak bu günün değerini alabileceğiz.

Hemen örneğimize geçelim ;

 

SelectionChanged eventi ile TakvimEtkinlikGoster.aspx Sayfasında Tarih adlı QueryString’i ile seçili olan tarihi gönderdim. Burada neden Substring yaptığımı soracak olursanız ilk neden olarak databaseniz de sadece tarihi tuttuğunuzu varsayarak ,ikinci neden ise string alanı datetime convert yaparak tarihede çevrdiğinizi varsayarak sadece 29.02.2008 ‘i almasını sağladık. Substring yapmasaydık alacağı tarih Tarih=29.02.2008%2000:00:00 gibi olacaktı. Böyle olmasını QueryString de istemediğimiz için Substring ile sadece 10 karekter alarak query’e göndermiş bulunduk.

 

Daha sonra TakvimEtkinlikGoster.aspx sayfamda da Tarih ‘e erişerek herhangi bir kontrol ile ufak sorgulamalar yaparak ilgili etkinliğe ulaşabiliriz. Böyle bir uygulama yaptığımızda kullanıcıya hangi gün etkinlik olduğunu göstermek zorundayız. Oysa ki biz sadece tüm aktif günlere link verdik. Dolayısı ile kullanıcı tek tek bu günde etkinlik var mı? Şeklinde tek tek bakması yerine kullanıcıya etkinlik bulunan günü bir şekilde göstermek gerekmektedir.

Bu Durumda ikinci örneğimiz  Aktif olan ayda eğer etkinlik var ise onu göstermeyi işleyelim. Öncelikle bir metod hazırladım. Metod’u pageload ‘a yerleştirdim ve metod içeriğinde ise şunları yapıyoruz :

Öncelikle database ye bağlanıyoruz ve etkinlikleri tuttuğumuz tablodaki verileri dataset ’e dolduruyoruz ve datareader ile tüm kayıtlar içinde dönerek calendar nesnemize ilgili tarih’i ekliyoruz. Aslında göründüğü kadar zor bir şey değil aşşağıdaki kodları incelediğinizde hak vereceğinizi umuyorum.

 

Gördüğünüz Gibi tüm tablom da verilerim arasında dolaşıyorum ve ilgili takvime SelectedDates property’sine ekliyorum. Dolayısı ile burada aktif olan günü buldum ve kullanıcıya gösterilmesini sağlıyorum.

 

13 Şubat’a eklediğim etkinliği metodum ile kullanıcıya takvim üzerinde daha önceden hazırlamış olduğumuz css ile farklılık yaratarak kullanıcıya göstermiş oldum.

Kullanıcı 13 şubat’ı tıkladığı zaman ilk örnekte yaptığımız gibi SelectionChanged eventinden faydalanarak diğer ara sayfamızda ilgili etkinliğe ait sonuçları gösterebiliriz.

Üçüncü örneğimiz de ise Daha öncede Bahsettiğim DayRender olayı ile neler yapabileceğimizi göreceğiz.

Bazı forum , blog , muzik vb gibi etkinlik ihtiyacı duyulan siteler de calendar uygulamasına çok ratslarsınız. Ancak bazılarında öyle farklılıklar vardır ki gerçekten hoş görüntüler ortaya çıkmaktadır. Bunlardan bir tanesi geride kalan 2 örneğimize baktığımızda kullanıcı , ona belirtilen kırmızı arkaplanlı etkinlik olduğunu gösteren hücre dışındaki tüm tarihlere tıklayacaktır. Ve dolayısı ile diğer gösteceğimiz sayfada “Etkinlik Bulunamadı” gibi bir ara kontrol yapmak zorunda kalacağız. Kimi zaman bunada ihtiyaç duyarız ancak kullanıcı dostu bir uygulama olabilmesi için ilk aklımıza gelenlerden bir taneside Takvimde sadece etkinlik bulunan gün’e tıklatmayı sağlasak sizcede hoş olmaz mı?

Bunun için DayRender event’ini kullanacağız.

Bildiğiniz üzere calendar nesnesini sayfamıza taşıdığımız andan itibaren sistemsel olarak tüm günler otomatik olarak yaratılıyor. Bizim burada ilk yapmamız gereken bu yaratılan günleri temizlemek olacaktır. Bunun nedeni ise istediğimiz etkinlik bulunan güne sadece link verebilmekdir.

Daha önceden kendime verileri çektiğim class oluşturup ve  geriye Bool gönderen bir metod açtım. Bunu yapma amacım ilgili hücrede bulunan tarih’i class’ımdaki metod’a gönderip eğer etkinlik var ise true yok ise false değerlerinden birini gönderiyorum. True da yaptığım işlemler ile falsede yaptığım işlemler ilk göndereceğim resimde aynı olacaktır buradaki mantık nerede diyeceksiniz?

 

Hemen asıl can alıcı yere geleyim. Normalde ikisinde de dinamik olarak Label yarattım ve text özelliğine gün’ü aktardım. Bu durumda calendar nesnemizde sadece günler yazacak ve daha önce yukarıda hazırlamış olduğum Takvim() metodu ile etkinlik bulunan takvimin arkaplanı kırmızı olacak. Ancak Label da herhangi bir tıklama şuan için mevcut mu? Hayır. Dolayısı ile true gelen yerde biraz farklı işlemler yapmalıyız.

 


Resimde de gördüğünüz gibi herşey şuan istediğimiz gibi görünüyor sadece etkinlik bulunan gün’e tıklatabilmek kaldı.

 


Gördüğünüz gibi metodumdan gelen değer true olduğu taktirde bir tane HyperLink oluşturuyorum. Text’ine ilgili günü belirttikten sonra düzen bozulmaması açısından ufak tefek değişiklikler yaptım(bold,underline gibi). Daha sonra HyperLink’in NavigateUrl ‘ine atama olarak daha öncede yapmış olduğum SelectionChanged de ki gibi ilgili url’imi ve Göndereceğim QueryString’i belirtiyorum. Ve bunu son olarakda hücreye ekliyorum. Gelen değerin False olmasında değişecek herhangi bir durum olmadığı için orayı yukarıdaki yazdığım şekilde aynen bırakıyorum.

Makalemizin sonunda kısacası anlattıklarımızı göre özet verirsek ;

Calendar nesnesini istediğimiz şekilde düzenleyerek ilgili parametre ve metodlarını doğru kullandığımız taktirde çok iyi şekilde uygulamalar çıkartabiliriz. Biz temel olarak Nasıl şekillendirebiliriz , Neler yapabiliriz , Calendar nesnesini daha etkin nasıl kullanabiliriz ? gibi sorularımıza cevaplar bulduk.

Umarım makale size detaylı bir araç olur.

Yardımları ve Desteğinden dolayı Sayın Emrah USLU ‘ya teşekkürler.

Tüm dosyaları indirmek için tıklayınız(Sadece makalenin word hali vardır örnek uygulama yoktur.)