jQuery UI Datepicker: Belirli tarihlerde tıklanabilir olayları nasıl ekleyebilirim?

Question

numaralı telefonu görmek istiyorum. numaralı etkinliklerin olduğu jquery datepicker tarihlerini vurgulayın (js olayından bahsetmiyorum ama gerçek hayat olayları: D).

1. Etkinlik tarihleri ​​takvime nasıl iletilir?
2. Olay sayfasını/etkinlik sayfasını, etkinlik sayfanıza gitmek için küçük bir açılır pencerede URL'leriyle görüntülemek için tıklatılabilir duruma getirilebilir?

Lütfen bunu elde etmeme yardımcı olacak eklentiler veya kaynak kodları (öğreticiler gibi) var mıdır?

Teşekkürler.

Not: Yalnızca bir tarihe bağlı olayları erişmek için, bir tarih almaya datepicker kullanmıyorum

PS2: Ben (fr ve ingilizce) çok dilli bir web sitesinde kullanacağız, Bu yüzden, tarih seçici

Answer 1

Bu düşünceyi kesinlikle tahmin ediyorum ve benim görüşüme göre tarih hırsızı widget'ının kötüye kullanımı çok fazla değil. Widget'ı, yukarıda açıkladığınız senaryo için tam olarak kullanılabilen bir satır içi başlatma seçeneği vardır.

Eğer gerekecek birkaç adım almak vardır:

1. in-line datepicker başlatın. her zaman görünecektir böylece <div> için datepicker widget'ı takın ve bir input ekleyin zorunda kalmazsınız:

   $("div").datepicker({...}); 
   

2. dokunun beforeShowDay olayın içine belirli olaylarla tarihleri ​​vurgulamak için.

   Olaylar dizisi:

   var events = [ 
       { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
       { Title: "Dinner", Date: new Date("02/25/2011") }, 
       { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
   ]; 
   

   Olay işleyicisi:

   beforeShowDay: function(date) { 
       var result = [true, '', null]; 
       var matching = $.grep(events, function(event) { 
        return event.Date.valueOf() === date.valueOf(); 
       }); 
   
       if (matching.length) { 
        result = [true, 'highlight', null]; 
       } 
       return result; 
   }, 
   

   Bu görünebilir Ayrıca, doldurmak ve istemciye aşağı gönderebileceği bir dizideki etkinliklerinizi tanımlamak biraz karmaşık, ancak tüm yaptığı, yukarıda tanımlanan events dizisinde girişleri olan tarih seçicisindeki tarihleri ​​vurgulamaktır.

   onSelect: function(dateText) { 
       var date, 
        selectedDate = new Date(dateText), 
        i = 0, 
        event = null; 
   
       /* Determine if the user clicked an event: */ 
       while (i < events.length && !event) { 
        date = events[i].Date; 
   
        if (selectedDate.valueOf() === date.valueOf()) { 
         event = events[i]; 
        } 
        i++; 
       } 
       if (event) { 
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ 
        alert(event.Title); 
       } 
   } 
   

   Yine kodun çok göründüğünün, ama onca oluyor biz' olmasıdır: Bir gün tıklandığında ne yapacağını datepicker söyleyebilir nerede

3. bir onSelect olay işleyicisi tanımlayın tıklanma tarihiyle ilişkili etkinliği bulmak. http://jsfiddle.net/Zrz9t/1151/: biz bu olayı bulduktan sonra, ne istersen eylem

İşte çalışan bir örnek var (örneğin, bir araç ipucu göster) alabilir. Olayları görmek için Şubat/Mart'a gittiğinizden emin olun.

Andrew Whitaker çözümüne ek olarak

Answer 2

(belki başlık veya tarih her zaman iyi bir tanımlayıcı olmadığı için aslında onun yazarlardan ama başkası için aslında onun belki mükemmel)

bunu yapmak için başka bir yol yoktur Not: ilk Andrew Whitaker çözüm okuyunuz ve

// date picker 
$("div").datepicker({ 
    // hook handler 
    beforeShowDay: function(tdate) { 
     var mydata = $(this).data("mydata"); 
     var enabled = false; 
     var classes = ""; 
     var title = date; 
     $.each(mydata, function() { 
      if (this.date.valueOf() === tdate.valueOf()){ 
       enabled = true; 
       classes = "highlight"; 
       title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;) 
      } 
     });   
     return [enabled,classes,title]; 
    }, 
    // event handler 
    onSelect: function() { 
     var id = $(this).find(".ui-datepicker-current-day").attr("data-id"); 
     mydata = $(this).data("mydata"), 
     selectedData = null;   
     /* search for data id */ 
     $.each(mydata,function(){ 
      if (this.id == id){ 
       selectedData = this; 
      } 
     }); 
     if (selectedData) { 
      /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ 
      alert(selectedData); 
     } 
    } 
}).data("mydata", 
    // your data 
    [{ 
     id:1, 
     title: "Five K for charity", 
     date: new Date("02/13/2011") 
    }, 
    { 
     id:2, 
     title: "Dinner", 
     date: new Date("02/25/2011") 
    }, 
    { 
     id:3, 
     title: "Meeting with manager", 
     date: new Date("03/01/2011") 
    }]);