一页上有多个完整日历

Question

我正在使用FullCalendar.js插件创建一个包含多个日历的页面。与外部事件示例一样，我能够将外部事件拖到每个日历上。只有在其中一个日历中更改视图（使用上一个，下一个）方法后，我才能再将事件拖到其他日历上。当我将外部事件拖到日单元格上时，它们不会突出显示，并且拖放也不起作用。

请注意，在每个日历中单独拖动已创建的事件仍然可以正常工作。但是拖放外部事件仅适用于我更改/上一个/下一个日期的日历。

请注意，我不想在各种日历之间拖动事件！

我尝试了一小段javascript，通过触发其余日历的'prev', 'next'方法来同步更改日历的日期。在这种情况下，拖放仅适用于更改日期的最后一个日历。

这是一种奇怪的行为。FullCalendar 是否使用某些全局设置等，可能会影响一个页面上的其他日历实例？我调试了由"prev"、"next"等调用的方法，但似乎没有全局更改任何内容。

我在单独的<div>元素中创建日历。

Answer 1

FullCalendar 在 html 文档上注册"mousedown"和"dragstart"的事件处理程序，以便从外部删除事件。这些处理程序函数首先使用 $.proxy（） 绑定到特定上下文，然后使用 jQuery 函数 .on（） 和 .off（） 添加/删除到文档中。jQuery Doc 声明了 .off（） 与 .proxy（） 的用法：

由 jQuery.proxy（） 或类似机制代理的处理程序将全部 具有相同的唯一 ID（代理函数），因此传递代理 .off 的处理程序可能会删除比预期更多的处理程序。在那些 情况最好使用 命名空间。

浏览 FullCalendar 取消上一个、下一个按钮等会调用当前视图（月视图等）的重绘，这涉及销毁当前视图和分离文档事件处理程序：

// taken from FullCalendar.js 2.1.1
destroy: function() {
    this.unselect();
    this.trigger('viewDestroy', this, this, this.el);
    this.destroyEvents();
    this.el.empty(); // removes inner contents but leaves the element intact
    $(document)
        .off('mousedown', this.documentMousedownProxy)
        .off('dragstart', this.documentDragStartProxy);    // all handlers removed here
},

由于 $.proxy（） 为单独 FullCalendar 实例的事件处理程序提供了相同的标识符，因此此调用会分离所有实例的处理程序。

一个快速的解决方案是对事件使用命名空间。我在 FullCalendar 的视图类中生成一个唯一的事件命名空间，并使用该命名空间对相应的事件进行 atach/分离：

View.prototype = {
    // ...
    // declare namespace 
    documentEventNamespace: null,
    init: function() {
        // ...
        // define namespace, simply with random number
        this.documentEventNamespace = "fcDocumentEvents" + parseInt(Math.random() * 1000);
    },
    render: function() {
        // ...
        // use namespace for events
        $(document)
            .on('mousedown.' + this.documentEventNamespace, this.documentMousedownProxy)
            .on('dragstart.' + this.documentEventNamespace, this.documentDragStartProxy); // jqui drag
    },

    // Clears all view rendering, event elements, and unregisters handlers
    destroy: function() {
        // use namespace for events
        $(document)
            .off('mousedown.' + this.documentEventNamespace, this.documentMousedownProxy)
            .off('dragstart.' + this.documentEventNamespace, this.documentDragStartProxy);
    },
    // ...
}

这是一个有效的黑客，但我更喜欢一个不接触 FullCalendar.js 代码的解决方案。也许其他人对此有提示，或者 FullCalendar 将在未来的更新中使用事件命名空间。