是否有一个 jquery 插件可以让我有一个像矩形一样的小日历，就像在 datepickers 中一样，并且一些日期会是不同的颜色。当我用鼠标查看日期时，会弹出一个窗口，说明当天安排了什么活动。当然我会用事件填充事件数组;-)
我只找到日期选择器（小）或日历（全屏大）。我的网页需要的是一个小日历和一个简单的鼠标悬停，可以显示我希望它显示的文本。
这样的东西存在吗？
【问题讨论】：
标签： jquery calendar datepicker
正如其他人所指出的，这可以通过 jQueryUI 的 datepicker 来实现。
Datepicker 有一些内置功能可以帮助您实现目标。具体来说，beforeShowDay 事件将让您无需太多代码即可自定义每天的外观和行为：
创建一个对象，其中包含您可以从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”是事件数据。
要让datepicker 小部件一直显示（例如不需要input），只需将该小部件应用到div：
HTML：
<div id="dates"></div>
JavaScript：
$("#dates").datepicker({....});
点击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 ] 等于真/假表示 这个日期是否 可选择的，[ 1 ] 等于 CSS 类 name(s) 或 '' 为默认值 演示文稿，以及 [2] 可选 此日期的弹出式工具提示。
所以我们要做的是查找传递给处理beforeShowDay事件的函数的日期的事件，并从我们的事件对象返回数据（如果存在）。
看起来很多，但是当你把它们放在一起看时，它并不算太糟糕。在此处查看示例：http://jsfiddle.net/andrewwhitaker/rMhVz/1/
注意CSS类必须使用!important覆盖datepicker的默认背景，并实际应用到日期trs内的a标签
【讨论】：
events 条目？
使用jquery UI datepicker。使用一些额外的 jquery，您可以连接鼠标悬停事件并显示信息。
日期可通过 cssclass 和嵌套信息识别。显示日历后，您可以附加事件处理程序。
$(document).ready(function () {
$("input").datepicker();
});
$('td a').live('mouseenter', function () {
alert($(this).text() + ' ' + $('.ui-datepicker-month').text()
+ ' ' +$('.ui-datepicker-year').text() );
});
选择器需要一些精度才能正确工作，但想法保持不变。
【讨论】：
如果你想在一天悬停时做一些特别的事情，你可以附加一个 .live 处理程序（或委托），因为 datepicker 是在 dom 完成加载后创建的，所以需要 live 到 day 元素并执行某种操作如果您需要在 dom 上显示工具提示、框或其他独特的东西，请查找。
$(".ui-datepicker-calendar .ui-state-default").live("hover", function() {
var month = $(".ui-datepicker-month").text();
var year = $(".ui-datepicker-year").text();
var day = $(this).text();
//Do something to look up the year month day..
$("h1").empty().text(month + day + year).fadeIn();
}, function() {
//something on mouse out
});
jsfiddle 上的简单示例。
但是，如果您发现 jQuery UI 日期选择器不能满足您的需求，请查看原始的 datepicker 插件，它提供了很多自定义。此外，它还在日期选择器extension 中提供了更多事件。
【讨论】：
作为 jQuery UI 日期选择器的替代方案，您可以查看我的日期选择器： http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
听起来您正在寻找的内容已包含在 renderCalendar 函数中： http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html
该示例使用renderCallback 向银行假日添加点击处理程序和额外文本。您应该能够轻松地调整它以添加悬停处理程序。
【讨论】：