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

我通过将click事件调整为仅使用数据呈现日历

来完成以下工作

喜欢这样

$(".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');

});

因为这都在模态中，所以你要确保模态是开放的

fullCalendar.js重复呈现的日历

1 个答案: