mehmetduran.com - Paylaşmak Güzeldir...
jQuery Takvim Eklentim (Datetimepicker Uygulamam)
Bu yazımda daha önce javascript ile hazırladığım takvim uygulamasını jQuery ile entegre edip eklenti olarak hazırladım. Daha önce buradaki yazımda javascript ile hazırladığım takvimi (datetimepicker) tanıtan bir yazı yazmıştım. Oradaki script kodları tekrar gözden geçirip uyarlayarak jQuery ile takvim eklentisini hazırladım. Şu anda hazırladığım eklenti her uygulamada rahatlıkla kullanılabilir. Ancak tek eksik yönü tarih formatını el ile belirlemek. Ancak bu eksiği tamamlayıp tam bir uygulama haline getirmeyi düşünüyorum. Hazır format fonksiyonları olsa da format işini takvimde olduğu gibi kendim hazırlamak istiyorum. Bunu da en kısa sürede yapacağım. Şimdi eklentimize ve nasıl kullanacağımıza bakalım.

Hazırladığım script kütüphanesini buradan görebilirsiniz. Uzun olduğu için kodları burada yazmıyorum. Bu kütüphaneyi kullanacağımız sayfaya eklemeliyiz. Sayfaya script kütüphanemizi ekledikten sonra takvim eklentisini nasıl kullanacağımıza bakalım.

  <script type="text/javascript">
      $(function() {
          $("#tarih1").Takvim();
          $("#tarih2").Takvim({ 
            event: "mouseover", 
            Time: 500, 
            Opacity: false 
          });
      });
  </script>

Bu şekilde takvim eklentisini kullanabiliyoruz. Şimdilik parametre ile görsel değerleri belirleyen özellikleri ve hangi event ile takvimin görüntüleneceğini belirliyorum. Ancak format belirleme işlemini tamamlayıp, format biçimini de parametre ile almayı düşünüyorum.

Yazdığım kodların anlaşılır olduğunu düşünüyorum. Bu yüzden uygulamada çok rahat değişiklikler ve uyarlamalar yapılabilir. Ayrıca her uygulamada çok rahat kullanabileceğimiz görsel bir eklenti oldu. Tek eksik yönü tarih formatlama işlemi. Şimdilik formatı script kodlarda yer alan tarih_al fonksiyonu içerisinde kendimize göre ayarlayabiliriz. (Script dosyasında formatlama yapacağımız yeri belirttim)

Takvimin renklerini ve görünümünü CSS kodlarda yapacağımız değişimlerle değiştirebiliriz. CSS kodları örnek dosyanın kaynağında bulabilirsiniz.

Hazırladığım örneği buradan görebilir, dosyaları da buradan indirebilirsiniz.

İyi Çalışmalar.
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar 29 Ekim Cumhuriyet Bayramımız Kutlu Olsun Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama jQuery ile 'Yukarı Çık' Uygulaması Jcrop ve Asp.net ile Resimleri Kesme (Örnek Dahil) Jquery ve Ajax ile AutoComplete Alan Yapımı
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 30 Eylül Çarşamba 2009 20:44 #1
Harika ;)
Salih Gedik 03 Ekim Cumartesi 2009 00:55 #2
Abi kodda ekleme çıkarma değilde IDE sayesinde basit hataları buldum temizledim bazı yerlerde if için {} işaretleri yoktu onları koydum. okul başladı can sıkıntısı işte http://pastebin.com/m103c75b4
Mehmet Duran 03 Ekim Cumartesi 2009 01:24 #3
Eyvallah Salih. Ancak dediğin gibi pek değişiklik olmamış.
Salih Gedik 03 Ekim Cumartesi 2009 01:30 #4
Belki 9 ay sonra bu Ext Core'a çeivrme girişiminde bulunurumda şuan sadece IDE nin sarı tabelayla gösterdiklerini yok etmeye çalıştım okadar onun haricinde zaten ekleme cıkarma gibi birşey yok ;)
cem 07 Aralık Pazartesi 2009 16:49 #5
gerçekten çok kullanışlkı güzel bir uygulama sitem için bir eklentide kullanmak istiyorum ve tarihleri db ye kayıt etmem gerekiyor iki ad. tarih alanım var girmek için ama bu eklentiyi kullandıgımda sadece 1 tane takvim eklenebiliyor bunu nasıl 2 adet yapabiliriz..
Mehmet Duran 07 Aralık Pazartesi 2009 22:49 #6
Merhaba. Eklentiyi sayfada kullandığımızda aynı anda sadece tek takvim gözükmekte ancak sayfada birden fazla yerde kullanabilmekteyiz. Örnek sayfasında da böyle. Söylemiş olduğun bir eksikliktir. Fırsat bulduğumda aynı anda birden fazla gösterebilen halini de yapmaya çalışırım.
Can 02 Eylül Perşembe 2010 22:56 #7
Öncelikle hocam elinize kolunuza sağlık gerçekten çok güzel bir uygulama olmuş ... kodları inceledim de tarih formatını falan düzelttim yalnız ben şöyle birşey yapmak istedim kişi tarihi seçtiği anda onu alıp bir asp.net texboxına yazsın böylece veritabanı işlemleri için bunu kullanabileceğim. veya html texti ni veritabanı için nasıl kullanabilirim hocam burda sorun yaşadım yardımcı olursanız sevinirim şimdiden Allah razı olsun
Mehmet Duran 04 Eylül Cumartesi 2010 09:52 #8
Merhaba. Buradaki eklentiyi direk asp.net textbox'ı ile de kullanabilirsin. Bunun için $("<%= TextBoxID.ClienID %>").Takvim() gibi bir kod yazman yeterli. Bir de bu eklenti dışında jQuery'nin kendi takvim eklentisini de öneririm.
Alp 10 Eylül Cuma 2010 18:57 #9
bence jquerynin hazır takvimine saat - dakika özelliği ekleyen bir plugin yazmalısın..
Mehmet Duran 13 Eylül Pazartesi 2010 10:22 #10
Merhaba @Alp. jQuery'nin takviminde tarihi formatlayabiliyoruz. Bu işlemde saat, dakika ve saniyeyi kullanabiliyoruz diye hatırlıyorum.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009