完整日历.js呈现重复日历

Question

我正在尝试为表格中的不同行项目生成一个新日历。日历在引导模式中呈现。初始渲染按预期工作，但是当我关闭并重新打开模式时，日历将附加到旧日历中。

这是我的代码：

$("#modal").on('shown.bs.modal', function () {
//Render full calendar
    $("#featureCal").fullCalendar({
        events:   'assets/ajax.php?a=facility-calendar.php&feature=1&facility=1',
        defaultView : "agendaDay",
        header: {
         left: 'prev,next',
         center: 'title',
         right: 'today'
        },
        editable: false,
        droppable: false,
        height: 600,
        eventAfterAllRender : function(v){
        var $c = v.element.parents(0).children().eq(1).find("tbody>tr>td.fc-header-left");
        if($c.children().length <=2){
            //Add button to header
            $c.append('</span></span><span class="fc-button fc-state-default fc-corner-left fc-corner-right margin-left025 addEvent"><i class="fa fa-calendar-plus-o"></i>');
        }
    }
});

}）;

当我关闭模态时，我执行以下操作

$("#featureCal").fullCalendar('destroy').remove();

每次我启动模态时，我都会清空（）它的内容，因为我一遍又一遍地使用相同的模态，只是删除模态内容。

我可以为每个日历创建单独的模态，但我更愿意弄清楚为什么会发生这种重复

我目前正在使用fullCalendar 1.6~，并且真的不想升级，因为所有日历都是出于显示目的

谢谢

Answer 1

我通过将单击事件调整为仅呈现一次带有数据的日历来获得以下工作

这样

$(".booking").one("click", function(){...
         //Remove all instances of the booking class and adjust it to another class
         $(".booking").removeClass("booking").addClass("calInfo");
});

然后为新类添加另一个事件侦听器

$(document).on("click", ".calinfo", function(){
     //Remove event source, adjust the source and add the source back into the calendar, refetch events and render
       $("#cal").fullCalendar('removeEventSource', source, 'addEventSource', newSource, 'refetchEvents, 'render');
});

由于这一切都在模态内，因此您需要 tp 确保模态是打开的