Datepicker与事件？ [英] Datepicker with events?

问题描述

有一个jquery插件，将允许我有一个小日历像矩形，如在datepickers和一些日期将是不同的颜色。当我用鼠标过去的日期有一个弹出窗口说明什么事件安排在那一天。当然，我将用事件填充事件数组; - ）

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.

这样的东西？

推荐答案

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

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

Datepicker有一些内置的功能，可以帮助您到达那里。具体来说， beforeShowDay 活动可让您自定义每天没有太多代码的外观和行为：

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. 创建一个包含可以从<$ c引用的事件的对象$ c> 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

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

要使 datepicker 小部件一直显示（不需要<$ c $例如，c> input ），只需将窗口小部件应用到 div ：

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

HTML ：：

HTML:

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

JavaScript ：

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

点击 beforeShowDay ，并返回相应的数组。 datepicker 将自动应用您指定的工具提示和类。这是我们上面定义的 Event 对象派上用场的地方：

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, '', ''];
        }
    }
});

这可能是最棘手的部分。 beforeShowDay 事件处理程序需要返回一个结构如下的数组：

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

0]等于true / false表示
，无论该日期是否为
可选，[1]等于CSS类别
名称（s）或''表示默认值

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

因此，我们正在做的是查找日期中的事件传递到处理 beforeShowDay 事件的函数中，并返回来自我们的事件对象的数据（如果存在）。

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.

它看起来很多，但是当你把它们放在一起时，它不会太糟糕。请查看以下示例： http://jsfiddle.net/andrewwhitaker/rMhVz/1/

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/

注意CSS类必须使用！important 来覆盖 datepicker ，并且实际应用于 tr s

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