jQuery UI Datepicker：如何在特定日期添加可點擊事件？

Question

我想突出顯示jQuery日期選擇器上的日期，其中有事件附加到它（我不是在說js事件，而是現實生活中的事件：D）。

1. 如何將事件日期傳遞給日曆？
2. 如何使它可點擊，或者在小的彈出式提示中顯示帶有url的事件，或者轉到活動頁面？

是否已有可用的插件或資源（如教程）來幫助我實現這個目標？

謝謝。

PS：我不使用的日期選擇器選擇一個日期，只訪問連接到一個日期的事件

PS2：我會用它在一個多語種網站（FR和英文），這就是爲什麼我想到datepicker

Answer 1

這是絕對有可能的，在我看來不是太多濫用datepicker部件。有一個選項可以在線初始化小部件，它可以用於上面描述的場景。

有一對夫婦的步驟，你將不得不採取：

1. 初始化日期選擇器在線。附上日期選擇器窗口小部件，<div>這樣它總是會出現，你會不會有將其連接到一個input：

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

2. 進軍beforeShowDay活動，強調與特定事件的日期。此外，定義數組您的活動，您可以填寫併發送到客戶端：

   活動數組：

   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") } 
   ]; 
   

   事件處理程序：

   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; 
   }, 
   

   這看起來可能有點複雜，但它所做的只是在日期選擇器中突出顯示在上面定義的events數組中有條目的日期。

3. 定義一個onSelect事件處理程序，在那裏你可以告訴日期選擇器時點擊每天做什麼：

   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); 
       } 
   } 
   

   再次，它看起來像一個大量的代碼，但所有發生的事情是，我們」重新找到與點擊日期相關的事件。之後，我們發現這種情況下，你可以把你想要的任何動作（顯示工具提示，例如）

下面是一個完整的工作示例：http://jsfiddle.net/Zrz9t/1151/。確保導航到二月/三月以查看事件。

Answer 2

除了安德魯·惠特克解決方案還有另一種方式來做到這一點（實際上它是一種技巧，但實際上它可能適合別人，因爲也許標題或日期並不總是一個很好的標識符）

注意：請先閱讀安德魯·惠特克解決方案，在這裏看到的變化

// 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") 
    }]);