wmismail Posted January 7, 2008 Share Posted January 7, 2008 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 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. <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>[/CODE]Ardından formumuza bir yazı alanı ve bir düğme ekliyoruz.[CODE]<input type="text" id="giris" name="giris" /><button id="girisbut">Takvim</button>[/CODE]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.[CODE]<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>[/CODE]Bu işlemlerimizi yaptıktan sonra örneğimiz hazırdır. Hepsini biraraya getirip eksiklerini tamamlarsak en basit haliyle şunu elde ederiz.[CODE]<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>[/CODE]Tarih <input type="text" id="giris" name="giris" /><button id="girisbut">Takvim</button>[CODE]<script type="text/javascript"> Calendar.setup( { inputField : "giris", ifFormat : "%d.%m.%Y", button : "girisbut" } );</script></body></html>[/CODE]Ş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.[color=#FF0000]Son Sözler[/color]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.İndir : _____________________________http://ajax-tr.110mb.com/yakuter/js-takvim/jstakvim.zipSahibi : _____________________________http://www.dynarch.com/projects/calendar/[/left] Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.