MaviTm Jquery Takvim Uygulaması

Download

1.3 ten sonra Yeni Özellikler.

Hafta sonu veya haftanın günlerini engelleme.

Haftanın günlerini engeleyebilmek için yeni bir ayar eklendi (Hafta sonları seçtirmemek).

Bayramlar ve resmi tatil günlerini engelleme.

Özel günler veya istediğiniz günlerin seçilebilmesini engellemek için bir ayar eklendi.

Tetikleyicier

Özel bir tetikleyici ilave edilmedi fakat Takvim günü seçildiğinde geçerli inputun change ve blur tetikleyicisi eklendi.

Giderilen eksiklikler

İleri geri yapıldığında selectbox lar da ilgili ay ve yılı gösterme işlemleri onarıldı. Takvim açıkken takvim haricinde başka bir yere tıklama yapıldığında takvim kapatılma eklendi.

Örnekler :

Haftanın 1., 3., 5. ve 7. günlerini engellemek için.

        $('.date').mavitmTakvim({
           baslangicYil:2005,
           bitisYil:2035,
           oncesiSecme:false,
        	 engelliHaftaGun:'1,3,5,7'
    	  });
		

23 nisan, 30 ağustos, 29 ekim ve hafta sonları seçilmesin ve haziran 8,11,27,28 günleride seçilmesin.

        $('.date').mavitmTakvim({
           baslangicYil:2005,
           bitisYil:2035,
           oncesiSecme:false,
        	engelliHaftaGun:'6,7',
          engelliAyGun:{4:[23],8:[30],10:[29],6:[27,28,11,8]}
    	  });
		

Geçmişte kalan günlerin seçilmesini engeller ve 2005 yılından 2035 yılı arası gösterim yapar

$('.date').mavitmTakvim({
        baslangicYil:2005,
        bitisYil:2035,
        oncesiSecme:true
    });
		

2008 yılından 2011 yılı arası gösterim yapar, Önceki tarihlere seçim yapılabilinir, ay isimlerini değiştirir.

$('.date2').mavitmTakvim({
        baslangicYil:2008,
        bitisYil:2011,
        oncesiSecme:false,
        ay : 'Oc,Sub,Mar,Nis,May,Haz,Tem,Agu,Eyl,Eki,Kas,Ara',
    });
		

Önceki tarihlere seçim yapılabilinir, ay isimlerini değiştirir, d-m-Y olarak değer dönderir.

$('.date3').mavitmTakvim({
        oncesiSecme:false,
        ay : 'Oc,Sub,Mar,Nis,May,Haz,Tem,Agu,Eyl,Eki,Kas,Ara',
        tarihFormat:'d-m-Y'
    });
		

Ayarlar :

Default Ayarları (Belirtilmezse varsayılan alacağı değerler)

        var defaults = {
            'baslangicYil' : bugun.getFullYear(),
            'bitisYil' : (bugun.getFullYear() + 5),
            'oncesiSecme' : true,
            'engelliHaftaGun': false,
            'engelliAyGun': false,
            'ay' : 'Ocak,Subat,Mart,Nisan,Mayis,Haziran,Temmuz,Agustos,Eylul,Ekim,Kasim,Aralik',
            'gunler' : 'Pt,S,Ça,Pe,C,Ct,P',
            'bugunText' : 'Bugün',
            'kapatText' : 'Kapat',
            'ileriText' : 'İleri',
            'geriText' : 'Geri',
            'tarihFormat':'d/m/Y'
        }
        

Css Kodları :

indireceğiniz sıkıştırılmış dosya içerisinde bir kaç farklı css kodları mevcut. En basit hali ile alttaki css te uygulayabilirsiniz.

Farklı css görünümlerini incelemek için buraya tıklayınız.

            .mavitmTakvim{width:220px; font-size:12px; background-color:#FFF;}
            .mavitmTakvim span{cursor: pointer;}
            .mavitmTakvim .takvimGunleri{ border-left:1px solid #CCC;}
            .mavitmTakvim .takvimGunleri th{ border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; background-color:#069; color:#FFF; padding:5px;}
            .mavitmTakvim .takvimGunleri td{border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; text-align:center;}
            .mavitmTakvim .takvimGunleri td span{padding: 5px; display: block;}
            .mavitmTakvim .takvimGunleri td span.izinsiz{background-color:#CCC; color:#666; cursor:default !important;}
            .mavitmTakvim .takvimGunleri td span.izinli:hover{background-color:#069; color:#FFF;}
            .mavitmTakvim .takvimHead{padding:3px; height:25px; background-color:#E1E1E1;}
            .mavitmTakvim .takvimHead .takvimgeri{ float:left; margin-right:5px; margin-top:8px;}
            .mavitmTakvim .takvimHead .takvimileri{ float:right; margin-top:8px;}
            .mavitmTakvim .takvimHead select{-moz-border-radius: 5px;-webkit-border-radius:5px;border-radius:5px; padding:3px; float:left; border:1px solid #CCC;}
            .mavitmTakvim .takvimFooter{height:15px; padding:4px; background-color:#E1E1E1;}
            .mavitmTakvim .takvimFooter .bugunuYaz{float:left;}
            .mavitmTakvim .takvimFooter .takvimKapat{float:right;}
        

Sürüm Bilgileri

v1.4

Not:

Kaynak kodlarını görüntülemek için buraya tıklayınız


Proje sayfasına git.