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

I want to highlight the dates on jquery datepicker where there are events attached to it (i'm not talking about js event, but real life events :D).

我想强调jquery datepicker上的日期，其中附有事件（我不是在谈论js事件，而是现实生活事件：D）。

How to pass the event dates to the calendar?
如何将活动日期传递给日历？
How to make it clickable, either to display the event(s) with their url in a small popup tip, either to go to the event page?
如何使其可点击，要么在一个小弹出提示中显示带有其URL的事件，要么转到事件页面？

Are there already available plugins or ressources (like tutorials) to help me achieve that please?

是否有可用的插件或资源（如教程）来帮助我实现这一目标？

Thanks.

谢谢。

PS: I'm not using the datepicker to pick a date, only to access the events attached to a date

PS：我没有使用datepicker来选择日期，只是为了访问附加到日期的事件

PS2: I'll use it on a multilingual website (fr and english), that's why I thought of datepicker

PS2：我会在多语种网站（fr和英语）上使用它，这就是为什么我想到了datepicker

2 个解决方案

#1

This is definitely possible, and in my opinion not too much of an abuse of the datepicker widget. There is an option to initialize the widget in-line, which can be used for exactly the scenario you describe above.

这绝对是可能的，而且在我看来，滥用datepicker小部件并不是太多。可以选择在线初始化窗口小部件，这可以完全用于上面描述的场景。

There are a couple of steps you'll have to take:

您需要采取以下几个步骤：

Initialize the datepicker in-line. Attach the datepicker widget to a <div> so that it will always appear and you won't have to attach it to an input:

在线初始化datepicker。将datepicker小部件附加到

，以便它始终显示，您不必将其附加到输入：
```
$("div").datepicker({...});
```
Tap into the beforeShowDay event to highlight dates with specific events. Also, define your events in an array that you can populate and send down to the client:

点击beforeShowDay事件以突出显示具有特定事件的日期。此外，在数组中定义您可以填充并发送到客户端的事件：

Events array:

事件数组：
```
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") }
];
```
Event handler:

事件处理程序
```
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;
},
```
This might look a bit complex, but all it's doing is highlighting dates in the datepicker that have entries in the events array defined above.

这可能看起来有点复杂，但它所做的只是突出显示datepicker中的日期，这些日期在上面定义的events数组中有条目。
Define an onSelect event handler where you can tell the datepicker what to do when a day is clicked:

定义一个onSelect事件处理程序，您可以在其中告诉datepicker在单击一天时要执行的操作：
```
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);
    }
}
```
Again, it looks like a lot of code, but all that's happening is that we're finding the event associated with the date clicked. After we find that event, you can take whatever action you want (show a tooltip, for example)

同样，它看起来像很多代码，但所有发生的事情是我们发现与点击日期相关的事件。在我们找到该事件后，您可以采取您想要的任何操作（例如，显示工具提示）

Here's a complete working example: http://jsfiddle.net/Zrz9t/1151/. Make sure to navigate to February/March to see the events.

这是一个完整的工作示例：http：//jsfiddle.net/Zrz9t/1151/。确保导航到二月/三月以查看事件。

#2

in addition to Andrew Whitaker solution there is another way to do it (actually its a hack but actually its maybe perfect for someone else because maybe the title or date is not always a good identifier)

除了安德鲁惠特克解决方案之外，还有另一种方法可以做到这一点（实际上它是一个黑客但实际上它可能对其他人来说很完美，因为标题或日期可能并不总是一个好的标识符）

Note: please read Andrew Whitaker solution first and see the changes here

注意：请先阅读Andrew Whitaker解决方案并在此处查看更改

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

#1