带有事件的Datepicker [英] Datepicker with events?

问题描述

是否有一个jquery插件，这将允许我有一个像日历的一样的小日历像矩形，一些日期将是不同的颜色。当我用鼠标来过日期时，有一个弹出窗口说当天安排了什么事件。当然我会填充事件数组的事件; - ）

我发现所有的日期戳（小）或日历（全屏大）。我需要我的网页是有一个小日历和一个简单的鼠标悬停，将显示我想要显示的文本。

这样的东西存在

解决方案

正如其他人所指出的，这可以通过jQueryUI的 datepicker 。

Datepicker有一些内置的功能，可以帮助您到达。具体来说， beforeShowDay 事件将允许您自定义每一天的外观和行为，而不需要多少代码：

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

     var Event = function text，className）{
    this.text = text; 
    this.className = className; 
   }; 
    
    var events = {}; 
   事件[new Date（02/14/2011）] =新事件（情人节，粉红色）; 
    events [new Date（02/18/2011）] = new Event（Payday，green）; 
     

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




2. 要使 datepicker 小部件始终显示（无需输入），只需将小部件应用到 div ：

   
   
   

   HTML ：

    < div id =dates>< / div> 
     

   JavaScript ：

     $（＃dates）。datepicker（{....}）; 
     




3. 点击进入 beforeShowDay 事件，并返回相应的数组。 datepicker 将自动应用您指定的工具提示和类。这是我们上面定义的事件对象的方式：

     $（＃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的默认背景，实际适用于日期 tr s a >

Is there a jquery plugin that would allow me to have a small calendar like rectangle, like in datepickers and some of the dates would be different colour. When I go over the date with mouse there is a popup saying what event is scheduled on that day. Of course I would populate the event array with events ;-)

All I find are the datepickers (small) or calendars (full screen large). What I need for my webpage is there is a small calendar there and a simple mouseover that would show the text that I would like it to show.

Does something like that exists?

解决方案

As others have pointed out, this is possible with jQueryUI's datepicker.

Datepicker has some built in functionality that will help you get there. Specifically, the beforeShowDay event will let you customize the appearance and behavior of each day without much code at all:

1. Create an object containing events you can reference from the datepicker's event handler:

   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");
   

   This code just creates an object with "keys" being the event date and "values" being event data.

2. To make the datepicker widget show up all the time (without requiring an input for example), just apply the widget to a div:

   HTML:

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

   JavaScript:

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

3. Tap into the beforeShowDay event, and return the appropriate array. datepicker will automatically apply a tooltip and class you specify. This is where the Event objects we defined above come in handy:

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

   This is probably the trickiest part. The beforeShowDay event handler expects you to return an array structured like this:

   [ 0 ] equal to true/false indicating whether or not this date is selectable, [ 1 ] equal to a CSS class name(s) or '' for the default presentation, and [ 2 ] an optional popup tooltip for this date.

   So what we're doing is looking up the event on the date passed into the function handling the beforeShowDay event and returning the data from our event object, if it exists.

It looks like alot, but it's not too bad when you look at it all put together. Check out the example here: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

Note the CSS classes must use !important to override the default background of the datepicker, and actually apply to the a tags inside of the date trs

这篇关于带有事件的Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！