JQuery için Çok Fonksiyonlu Takvim Eklentisi

JQuery için Çok Fonksiyonlu Takvim Eklentisi

/ Okuma süresi: 2 dk, 41 sn / Yorum (0)
A A A

PIGNOSE Calender, web sayfanıza, tarih (ve tarih aralığı) seçimini ve çeşitli dilleri destekleyen güzel, duyarlı, mobil uyumlu bir takvim oluşturmak için kullanılan bir jQuery takvim eklentisidir.

Web sayfanıza mobil uyumlu ve gerçekten çok güzel ve fonksiyonel bir takvim ekletisidir. Kurulum için aşağıdaki adımları gözden geçirin. İndirme bağlantısında tüm dosyalar mevcut.

1. Önce jQuery kütüphanesini ve moment.js dosyasını web sayfasına ekleyin.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. PIGNOSE Calender'ın stil sayfasını ve JavaScript dosyalarını web sayfasına ekleyin.

<link rel="stylesheet" href="pignose.calender.css">
<script src="pignose.calender.js"></script>

3. Sayfada takvimin gözükeceği yere aşağıdaki kodu ekleyin.

<div class="calender"></div>

4. Takvim özelleştirmeleri için aşağıdaki kodu js kodlarının arasına ekleyip özelleştirmeleri yapın.

$('.calender').pignoseCalender({ // en, ko, fr, ch, de, jp, pt, fr lang: 'en', // You can change auto initialized date at first. date: moment(), // light, dark theme: 'light', // date format format: 'YYYY-MM-DD', // CSS class array classOnDays: [], // array of enabled dates enabledDates: [], // disabled dates disabledDates: [], // You can disable by using a weekday number array (This is a sequential number start from 0 [sunday]). disabledWeekdays: [], // This option is advanced way to using disable settings, You can give multiple disabled range by double array date string by formatted to 'YYYY-MM-DD'. disabledRanges: [], // Set and array of events to pin on calendar. // Each event is an object that must contain a date string formatted to 'YYYY-MM-DD' and class key that belong to classOnEvents dictionary indicating its color on calendar. // Events with not color class suitable are all pin with #5c6270. // Issues may arise when the number of color class increase, this could break the calendar cell. schedules: [], // Set a dictionary with class 'key' and color code 'value' used for pin events class by date. scheduleOptions: { colors: {} }, // Your first day of week (0: Sunday ~ 6: Saturday). week: 0, // If you set true this option, You can use multiple range picker by one click on your Calendar. pickWeeks: false, // You can turn on/off initialized date by this option. initialize: true, // enable multiple date selection multiple: false, // use toggle in the calendar toggle: false, // shows buttons buttons: false, // reverse mode reverse: false, // display calendar as modal modal: false, // add button controller for confirm by user buttons: false, // minimum disable date range by 'YYYY-MM-DD' formatted string minDate: null, // maximum disable date range by 'YYYY-MM-DD' formatted string maxDate: null, // called when you select a date on calendar (date click). select: functon (){}, // If you set true this option, You can pass the check of disabled dates when multiple mode enabled. selectOver: false, // called when you apply a date on calendar. (OK button click). apply: functon (){}, // called when you apply a date on calendar. (OK button click). click: null
});

Takvimin demo sayfasına buradan bakabilirsiniz.

Bu yazıyı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 960 kez okundu.
Yazıya ait etiketler
Ogznet.com

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

" JQuery için Çok Fonksiyonlu Takvim Eklentisi konulu makalemizde Ogznet.com olarak sizlere JQuery için Çok Fonksiyonlu Takvim Eklentisi ile ilgili bilgiler aktarmak istedik. Hemen yukarıda JQuery için Çok Fonksiyonlu Takvim Eklentisi ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

Adblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
Firefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
Ghostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.