Datepicker与事件？

Question

有没有一个jquery插件可以让我有一个像矩形的小日历​​,就像在日期选择器中,一些日期将是不同的颜色.当我用鼠标查看日期时,会弹出一个弹出窗口,说明当天安排了什么事件.当然我会用事件填充事件数组;-)

我找到的只是日期采摘(小)或日历(全屏大).我的网页需要的是那里有一个小日历和一个简单的鼠标悬停,它会显示我希望它显示的文本.

这样的事情存在吗？

Answer 1

正如其他人所指出的那样,这是可能的jQueryUI的的日期选择器.

Datepicker具有一些内置功能,可以帮助您实现目标.具体来说,该beforeShowDay事件将让您自定义每天的外观和行为,而不需要太多代码:

1. 创建一个包含可以从datepicker事件处理程序引用的事件的对象:

   var Event = function(text, className) {
       this.text = text;
       this.className = className;
   };
   
   var events = {};
   events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
   events[new Date("02/18/2011")] = new Event("Payday", "green");
   

   此代码只创建一个对象,其中"keys"是事件日期,"values"是事件数据.

2. 要使datepicker窗口小部件始终显示(不需要input例如),只需将窗口小部件应用于div:

   HTML:

   <div id="dates"></div>
   

   JavaScript:

   $("#dates").datepicker({....});
   

3. 点按该beforeShowDay事件,然后返回相应的数组. datepicker将自动应用您指定的工具提示和类.这是Event我们上面定义的对象派上用场的地方:

   $("#dates").datepicker({
       beforeShowDay: function(date) {
           var event = events[date];
           if (event) {
               return [true, event.className, event.text];
           }
           else {
               return [true, '', ''];
           }
       }
   });
   

   这可能是最棘手的部分.该beforeShowDay事件处理程序期望你返回结构像这样的数组:

   [0]等于true/false,表示此日期是否可选,[1]等于CSS类名称或''作为默认表示,[2]是此日期的可选弹出工具提示.

   所以我们正在做的是在传递给处理beforeShowDay事件的函数的日期查找事件,并从事件对象返回数据(如果存在).

它看起来很多,但是当你把它们放在一起时它并不是太糟糕.看看这里的例子:http://jsfiddle.net/andrewwhitaker/rMhVz/1/

请注意,CSS类必须用于!important覆盖默认背景datepicker,并实际应用于a日期trs 内的标记