Javascript 带有json数据源的jQuery UI Datepicker中的事件

我想在jQueryUIDatePicker中显示事件。我希望有事件的日子与没有事件的日子的样式不同，并且我希望在将日期与事件悬停时显示带有事件详细信息的自定义工具提示

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

有关事件数据，请访问

我想要的模型：

这是我用于创建日期选择器的代码：

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

---

我现在不关心解决方案的CSS部分，只关心javascript部分。当将日期与附加的事件悬停在一起时，如何使自定义工具提示显示？如何附加事件（日历事件，而不是javascript/DOM事件；）？

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

编辑：下面是一个JSFIDLE，代码正在运行：

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 = $('<div></div>').attr('id', 'eventPopup');
                            $('body').append(popup);
                        }

                        var pos = $(this).offset();

                        popup.html('<p>' + eventText + '</p>').
                            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];
}

getEvents（）；
$（函数（）{
$（'#dateDiv'）。日期选择器({
altField:“#日期输入”，
altFormat:'年-月-日'，
日期格式：'年-月-日'，
第一天：“1”，
showOtherMonths:'正确'，
在展示日之前：在展示日之前，
onChangeMonthYear:getEvents
});
});
var enqueuedDates=[]；
var tryCounter=0；
var事件=[]；
函数getEvents（）{
事件=[]；
排队日期=[]；
$.getJSON（'events.json'，函数（json）{
events=json；
});
}
ShowDay（日期）之前的功能{
enqueuedDates.push（新日期（Date））；
if（enqueuedDates.length==35）{
processEnqueuedDates（）；
}
返回[真]，''；
}
函数processEnqueuedDates（）{
如果（！events | | events.length==0）{
tryCounter++；
如果（tryCounter<100）{
setTimeout（processEnqueuedDates，10）；
}否则{
tryCounter=0；
}
返回；
}
tryCounter=0；
对于（变量i=0；i”）。
css（“左”，位置左+5+“px”）。
css（'top'，（pos.top-popup.height（）-2）+'px'）。
bind（'mouseenter'，function（）{
clearTimeout（hideTimeoutID）；
hideTimeoutID=null；
}).
绑定（'mouseleave'，函数（）{
$（this.hide（）；
}).
show（）；
}
}（事件文本））。
绑定（'mouseleave'，函数（eventObject）{
hideTimeoutID=setTimeout（函数（）{
$（'#eventPopup'）.hide（）；
}, 200);
});
}
}
}
函数getEvent（事件、日期）{
返回事件.过滤器（函数（事件、索引、arr）{
返回日期-$.datepicker.parseDate（'yy-mm-dd'，event.date）==0；
})[0];
}

您是否曾经研究过如何处理在单击事件中消失的事件？您只需在onSelect事件中再次手动调用beforeShowDay事件（或用于实际更新/显示事件的任何事件）。如果您在同一天有多个事件，您如何让它们全部显示？