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

问题描述

我想突出显示 jquery datepicker 上有事件附加的日期(我不是在谈论 js 事件，而是在谈论现实生活中的事件 :D).

1. 如何将事件日期传递给日历?
2. 如何使其可点击，或者在一个小的弹出提示中显示带有 url 的事件，或者转到事件页面?

是否已经有可用的插件或资源(如教程)来帮助我实现这一目标?

谢谢.

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

PS2:我会在多语言网站(法语和英语)上使用它，这就是我想到日期选择器的原因

解决方案

这绝对是可能的，而且在我看来并没有过多地滥用日期选择器小部件.有一个选项可以在线初始化小部件，它可以完全用于您在上面描述的场景.

您必须执行以下几个步骤:

1. 内联初始化日期选择器.将日期选择器小部件附加到

   以便它始终显示并且您不必将其附加到 input:

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

2. 利用 beforeShowDay 事件突出显示具有特定事件的日期.此外，在您可以填充并发送到客户端的数组中定义您的事件:

   事件数组:

   var events = [{标题:慈善五千"，日期:新日期(02/13/2011")}，{ 标题:晚餐"，日期:新日期(02/25/2011")}，{ Title: "Meeting with manager", Date: new Date("03/01/2011") }];

   事件处理程序:

   beforeShowDay: function(date) {var 结果 = [true, '', null];var 匹配 = $.grep(events, function(event) {返回 event.Date.valueOf() === date.valueOf();});如果(匹配.长度){结果 = [真，'突出显示'，空];}返回结果；},

   这可能看起来有点复杂，但它所做的只是突出显示日期选择器中的日期，这些日期在上面定义的 events 数组中具有条目.

3. 定义一个 onSelect 事件处理程序您可以在其中告诉日期选择器在单击一天时要执行的操作:

   onSelect: function(dateText) {变量日期，selectedDate = new Date(dateText),我 = 0,事件 = 空；/* 判断用户是否点击了一个事件:*/while (i < events.length && !event) {日期 = 事件[i].日期；if (selectedDate.valueOf() === date.valueOf()) {事件 = 事件[i];}我++;}如果(事件){/* 如果事件已定义，则在此处执行一些操作；显示工具提示、导航到 URL 等 */警报(事件.标题)；}}

   同样，它看起来像很多代码，但所发生的一切都是我们正在寻找与点击日期相关的事件.在我们找到该事件后，您可以执行任何您想要的操作(例如显示工具提示)

这是一个完整的工作示例:http://jsfiddle.net/Zrz9t/1151/.请务必导航至二月/三月以查看活动.

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. How to pass the event dates to the calendar?
2. 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?

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

PS2: I'll use it on a multilingual website (fr and english), that's why I thought of 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.

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

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({...});
   

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

   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.

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

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屋！