Temmuz 7

Javascript Takvim Uygulaması

JavaScript & DOM yakuter

Biliyoruz ki formlar sitelerimizin vazgeçilmez elemanlarıdır. Hemen her alanda artık doldurulması gereken formlarla kaşılaşıyoruz. Bazen bu formalrda kullanıcıdan yapacağı işlem için bir tarih girmesini isteriz. Bu durumda bazı olumsuzluklar kullanıcının karşısına çıkar. Birincisi tarihi girmesi gereken yapıyı yani formatı bilmemesidir. İkincisi ise gireceği tarihin hangi güne denk geldiğinden emin olamamasıdır. Biz de diyoruz ki neden kullanıcılarımızın işini kolaylaştırıp onlara o anda kullanabilecekleri hızlı, basit bir takvim sunmayalım ki? ;)

Javascript Takvim Uygulaması

Bu makalede anlatacağım uygulama The DHTML/Javascirpt Calender. Javascript Calender oldukça detaylı bir uygulama olup bir çok ayarı mevcuttur. Tam detaylı kullanımını HTML dosyası olarak buradan öğrenebilir, PDF dosyası olarak buradan indirebilirsiniz. Ben ise en basit şekliyle uygulamayı formlarınıza nasıl dahil edeceğinizi ve 12.10.2007 gibi basit bir tarih girişinin nasıl yapılacağını anlatacağım.

Dosyalar

Js Takvim
Js Takvim Dosyaları

Burada görmüş olduğunuz dosyalardan sadece index.html dosyasını ben hazırladım ve örnek formumuz bu dosyada bulunuyor. Diğer javascript dosyaları ve css dosyasında herhangi bir düzenleme yapmıyoruz. Bu dosyalar takvimin çalışabilmesi için formumuzun bulunduğu dosyamıza(burada index.html) eklememiz gereken dosyalar.

Kullanımı

Öncelikle formumuzu ekleyeceğimiz dosyamızı yaratıyoruz ki benim örneğimde bu dosya index.html Ardından bu dosyaya Javascript Calender uygulamasının elemanları olan javascript ve css dosyalarını ekliyoruz.

PLAIN TEXT
PHP:
  1. <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /><script type="text/javascript" src="calendar.js"></script>
  2. <script type="text/javascript" src="calendar-tr.js"></script>
  3. <script type="text/javascript" src="calendar-setup.js"></script>

Ardından formumuza bir yazı alanı ve bir düğme ekliyoruz.

PLAIN TEXT
PHP:
  1. <input type="text" id="giris" name="giris" />
  2. <button id="girisbut">Takvim</button>

Son olarak koymuş olduğumuz koymuş olduğumuz düğmeye ve yazı alanına takvim uygulamasını bağlıyoruz. Bu işlem için de şu kodu kullanıyoruz.

PLAIN TEXT
PHP:
  1. <script type="text/javascript">
  2.   Calendar.setup(
  3.     {
  4.       inputField  : "giris", //yazı alanının id'si
  5.       ifFormat    : "%d.%m.%Y",  //tarih formatı
  6.       button      : "girisbut" //düşmenin id'si
  7.     }
  8.   );
  9. </script>

Bu işlemlerimizi yaptıktan sonra örneğimiz hazırdır. Hepsini biraraya getirip eksiklerini tamamlarsak en basit haliyle şunu elde ederiz.

PLAIN TEXT
PHP:
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="content-type" content="text/xml; charset=windows-1254" />
  5.  
  6. <title>Yakuter &raquo; Js-Takvim Uyuglaması</title>
  7.  
  8. <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /><script type="text/javascript" src="calendar.js"></script>
  9. <script type="text/javascript" src="calendar-tr.js"></script>
  10. <script type="text/javascript" src="calendar-setup.js"></script>
  11.  
  12. </head>
  13.  
  14. <body>
  15.  
  16. Tarih <input type="text" id="giris" name="giris" /><button id="girisbut">Takvim</button>
  17.  
  18. <script type="text/javascript">
  19.   Calendar.setup(
  20.     {
  21.       inputField  : "giris",
  22.       ifFormat    : "%d.%m.%Y", 
  23.       button      : "girisbut"     
  24.     }
  25.   );
  26. </script>
  27.    
  28. </body>
  29. </html>

Şunu unutmamanız gerekir ki bu uygulamanın tek amacı yazı alanına tarihi girmek. Bu tarihinin veritabanına kaydedilmesini bu uygulama ile yapamazsınız. Bunun için PHP, ASP vb. bir programlama dili kullanmanız gerekir.

Son Sözler

Javascript Calender kesinlikle sadece bu basit uygulamadan ibaret değil. Ayrıca düğme yerine resim kullanarak takvimi aktif hale getirebiliyorsunuz. Takvimin bir pencere olarak açılması yerine sayfaya gömülü bir şekilde kullanılmasını sağlayabiliyorsunuz. Bu ve benzeri daha fazla detaya uygulamanın kendi sayfasından ulaşabilirsiniz.

Makalede anlattığım Js Takvim örneğini buradan test edebilirsiniz.
Js Takvim örneğini buradan indirebilirsiniz.

Toplamda 4431 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 5 kişi aynı anda okumuş.
Bugün 0 kez okunmuş.

Etiketler: , , 

1 oy2 oy3 oy4 oy5 oy (10 oy, ortalama 4.9) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

7 yorum var

  1. # yakuter » Javascript İle Takvim Nasıl Yapılır? | 07 Temmuz 2007, 14:37 Gravatar

    […] altında yazıldı. Bu yazıyı RSS 2.0 beslemesinden takip edebilir, yorum yazabilir veya geri izlemede bulunabilirsiniz. showdate(); […]

  2. # eburhan | 07 Temmuz 2007, 15:02 Gravatar

    Gerçekten kullanışlı bir uygulamaymış. Klavyedeki yön tuşlarıyla bile gezinebilmemiz güzel olmuş. Teşekkürler ;)

  3. # Mustafa Şapçılı | 07 Temmuz 2007, 20:32 Gravatar

    Tam da son projem için arama / arşiv modülü kodlayacakken ilaç gibi geldi :)

    Saolasın yakuter ;)

  4. # yakuter | 07 Temmuz 2007, 22:56 Gravatar

    Rica ederim Mustafa ve eburhan güle güle kullan ;)

  5. # nurettin | 31 Ağustos 2007, 10:35 Gravatar

    Teşekkurler

  6. # fobi | 16 Kasım 2007, 13:38 Gravatar

    Peki bunu form yerine direk sayfaya include etsek nasıl olur. Güzel bir uygulama olmuş. Tebrikler.

  7. # Mehmet Büküm | 26 Şubat 2008, 16:49 Gravatar

    benzer bir uygulamanın asp.net ve ajax ile nasıl yapıldığını videoyla anlatmıştm. Konu ile alakalı olduğu için verme gereğ duydum
    http://www.kamuflaj.org/video/aspnet-ajax-takvim/

Yorum yazın

sayfa sayacı