Javascript Takvim Uygulaması

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

Javascript Takvim Uygulaması

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 TEXTPHP:
<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>
<script type="text/javascript" src="calendar-tr.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
Ardından formumuza bir yazı alanı ve bir düğme ekliyoruz.

PLAIN TEXTPHP:
<input type="text" id="giris" name="giris" />
<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 TEXTPHP:
<script type="text/javascript">
Calendar.setup(
{
inputField : "giris", //yazı alanının id'si
ifFormat : "%d.%m.%Y", //tarih formatı
button : "girisbut" //düşmenin id'si
}
);
</script>
Bu işlemlerimizi yaptıktan sonra örneğimiz hazırdır. Hepsini biraraya getirip eksiklerini tamamlarsak en basit haliyle şunu elde ederiz.

PLAIN TEXTPHP:
<html>

<head>
<meta http-equiv="content-type" content="text/xml; charset=windows-1254" />

<title>Yakuter » Js-Takvim Uyuglaması</title>

<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>
<script type="text/javascript" src="calendar-tr.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>

</head>

<body>

Tarih <input type="text" id="giris" name="giris" /><button id="girisbut">Takvim</button>

<script type="text/javascript">
Calendar.setup(
{
inputField : "giris",
ifFormat : "%d.%m.%Y",
button : "girisbut"
}
);
</script>

</body>
</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.