jQuery UI Datepicker：如何在特定日期添加可点击的事件？ [英] jQuery UI Datepicker : how to add clickable events on particular dates?

问题描述

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

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).

1. 如何将活动日期传递给日历？


2. 如何使其可点击，以显示事件）与他们的url在一个小的弹出提示，要么去事件页面？

是否有可用的插件或资源教程），以帮助我实现吗？

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

谢谢。

PS：我不是使用datepicker选择日期，仅访问附加到日期的事件

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

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

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

推荐答案

这绝对是可能的，在我看来，滥用datepicker小部件。有一个选项可以在线初始化窗口小部件，这可以用于上面描述的场景。

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.

您需要执行几个步骤：

1. 在线初始化datepicker。将datepicker小部件附加到< div> ，以便它始终显示，您不必将其附加到输入：

1. 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:

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

点击 beforeShowDay 事件突出显示具体事件的日期。另外，您可以将数组中的事件定义为可以填充并发送给客户端的数组：

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:

事件数组：

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

这可能看起来有点复杂，但它所做的一切都是突出显示日期在事件数组中有条目的datepicker在上面定义。

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.

定义一个 onSelect 事件处理程序，您可以在其中告诉datepicker什么当一天被点击时要做：

Define an onSelect event handler where you can tell the datepicker what to do when a day is clicked:

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)

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

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

这篇关于jQuery UI Datepicker：如何在特定日期添加可点击的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！