使用json数据源的jQuery UI Datepicker中的事件

我想在jQuery UI Datepicker中显示事件。 我希望将事件的日期设置为与没有事件的日期不同的日期，并且我希望在使用事件hover日期时显示包含事件详细信息的自定义工具提示。

“使用jQuery tipsy的jQuery UI Datepicker ”问题的解决方案非常接近，但不适用于我使用的Datepicker配置。 我使用“showOtherMonths”选项，它会抛出日期链接计算。

事件数据可从http://mydomain.com/events.json获得

我想要的样机：

这是我用于创建Datepicker的代码：

$('#dateDiv').datepicker({ altField: '#dateInput', altFormat: 'yy-mm-dd', dateFormat: 'yy-mm-dd', firstDay: '1', showOtherMonths: 'true', }); 

我现在不关心解决方案的CSS部分，只关注javascript部分。 将鼠标hover在附加事件的日期时，如何显示自定义工具提示？ 我如何附加事件（日历事件，而不是javascript / DOM事件;））？

Answer 1

这不是一个非常优雅的解决方案，但似乎确实有效。 有人可以想出更好的东西吗？

编辑：这是运行代码的jsFiddle： http ： //jsfiddle.net/Tobbe/JrkSN/3/

EDIT2：它一直有效，直到我点击一个日期，然后所有事件都消失了，因为在这种情况下没有调用beforeShowDay回调。 我该如何解决这个问题？

 getEvents(); $(function() { $('#dateDiv').datepicker({ altField: '#dateInput', altFormat: 'yy-mm-dd', dateFormat: 'yy-mm-dd', firstDay: '1', showOtherMonths: 'true', beforeShowDay: beforeShowDay, onChangeMonthYear: getEvents }); }); var enqueuedDates = []; var tryCounter = 0; var events = []; function getEvents() { events = []; enqueuedDates = []; $.getJSON('events.json', function(json) { events = json; }); } function beforeShowDay(date) { enqueuedDates.push(new Date(date)); if (enqueuedDates.length == 35) { processEnqueuedDates(); } return [true, '', '']; } function processEnqueuedDates() { if (!events || events.length === 0) { tryCounter++; if (tryCounter < 100) { setTimeout(processEnqueuedDates, 10); } else { tryCounter = 0; } return; } tryCounter = 0; for (var i = 0; i < enqueuedDates.length; ++i) { var event = getEvent(events, enqueuedDates[i]); if (event) { var theDateCells = $('#dateDiv .ui-datepicker-calendar td'); var hideTimeoutID; theDateCells.eq(i).addClass('eventPlanned'). bind('mouseenter', function(eventText) { return function() { if (hideTimeoutID) { clearTimeout(hideTimeoutID); hideTimeoutID = null; } var popup = $('#eventPopup'); if (popup.size() == 0) { popup = $('
').attr('id', 'eventPopup'); $('body').append(popup); } var pos = $(this).offset(); popup.html('
' + eventText + '
'). css('left', pos.left + 5 + 'px'). css('top', (pos.top - popup.height() - 2) + 'px'). bind('mouseenter', function() { clearTimeout(hideTimeoutID); hideTimeoutID = null; }). bind('mouseleave', function() { $(this).hide(); }). show(); } }(event.text)). bind('mouseleave', function(eventObject) { hideTimeoutID = setTimeout(function() { $('#eventPopup').hide(); }, 200); }); } } } function getEvent(events, date) { return events.filter(function(event, index, arr) { return date - $.datepicker.parseDate('yy-mm-dd', event.date) === 0; })[0]; }