我想强调jquery datepicker上有附加事件的日期(我不是在说js事件,但现实生活事件:D)。
>如何将事件日期传递到日历?
>如何让它可点击,要在一个小的弹出提示中显示事件和他们的URL,要么去事件页面?
是否已经有可用的插件或资源(如教程)来帮助我实现呢?
谢谢。
PS:我没有使用日期选择器来选择日期,只能访问附加到日期的事件
PS2:我会在多语言网站(fr和english)上使用它,这就是为什么我想到datepicker
解决方法
这是绝对可能的,在我看来,不是太多的滥用日期选择器小部件。有一个选项来初始化窗口小部件,它可以用于上面描述的场景。
有几个步骤,你必须采取:
>在内部初始化datepicker。将日期控件小部件附加到< div>因此它将始终显示,您不必将其附加到输入:
$("div").datepicker({...});
>点击进入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; },
这可能看起来有点复杂,但它所做的是突出显示datepicker中的日期,它们在上面定义的events数组中有条目。
>定义一个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); } }
同样,它看起来像很多代码,但所有这一切发生的是,我们找到与点击日期相关联的事件。在我们找到该事件后,您可以采取任何您想要的操作(例如显示工具提示)
这里有一个完整的工作示例:http://jsfiddle.net/Zrz9t/1151/.确保导航到2月/ 3月查看事件。