Question

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

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

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

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

这是一种奇怪的行为。 FullCalendar是否使用某些全局设置等可能会影响一个页面上的其他日历实例？我调试了＆＃39; prev＆＃39;，＆＃39; next＆＃39;等，但似乎并没有改变全球。

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

Answer 1

FullCalendar为＆＃39; mousedown＆＃39;注册事件处理程序和＆＃39; dragstart＆＃39;在html文档上，可以使事件外部删除。这些处理函数首先使用$ .proxy（）绑定到特定上下文，然后使用jQuery函数.on（）和.off（）添加/删除到文档。 jQuery Doc说明.off（）与.proxy（）的使用：

由jQuery.proxy（）或类似机制代理的处理程序都将完成具有相同的唯一ID（代理功能），因此传递代理 .off的处理程序可能会删除比预期更多的处理程序。在那些最好使用附加和删除事件处理程序命名空间。

浏览FullCalendar unsing prev，下一个按钮等会调用当前视图（月视图等）的重绘，其中包括销毁当前视图和分离文档事件处理程序：

// 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 / detach相应的事件：

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将在未来的更新中使用事件命名空间。

一页上有多个FullCalendars

1 个答案: