Fullcalendar：为什么日历在页面上出现两次？答案

【问题标题】：Fullcalendar: why is the calendar appearing twice on the page?Fullcalendar：为什么日历在页面上出现两次？
【发布时间】：2018-08-23 14:25:46
【问题描述】：

我正在为 jQuery 使用 Fullcalendar，由于某种原因，日历在页面上出现了两次。这不是关于在同一页面上有两个 fullcalendar 实例的问题。

相反，在第一个日历的底部，有第二个相同的日历。

我确认我的页面中只有一个#calendar div，所以我相信这个错误与我调用 fullcalendar.js 的 .js 有关。

非常感谢任何帮助。

JS代码：

jQuery('#calendar').fullCalendar({


        year: jQuery.today.getFullYear(),
        month: jQuery.today.getMonth(),
        date: jQuery.today.getDate(),
        theme: true,
        contentHeight: 1000,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaDay',
        dayClick: function(date, allDay, jsEvent, view) {
                           // a lot of custom code
                    }
            });

HTML：

<table><tr><td valign="top" width="700px"><div id="calendar"></div></td></tr></table>

javascript 中 fullcalendar 的其他调用（这会将日期选择器放在同一页面上#calendar div 左侧的 div 中）：

jQuery('#datepicker_for_calendar').datepicker({
          defaultDate: jQuery.today,
          minDate: jQuery.startDate,
          maxDate: jQuery.endDate,
          inline: true,
          showButtonPanel: true,
          onSelect: function(dateText, inst) {
              var d = new Date(dateText);
              jQuery('#calendar').fullCalendar('gotoDate', d);
              selectedDate = d;
          }
      });

【问题讨论】：

能否请您发布相关的html和javascript？
我在 fullcalendar 调用中有相当多的代码，希望有一个通用的原因。将尝试减少问题的代码。
“相当多的代码”很可能是问题的一部分。另外，您还有哪些其他fullCalendar 调用（带有用于操作的字符串参数）？
@justkt - 我在代码上方添加了对 fullcalendar 的另一个调用，它在同一页面的 datepicker 调用中。我注释掉了 dayClick 中的所有代码，但仍然存在双日历问题。此外，当我单击日期选择器中的某一天时，第一个完整日历会按预期更改为那一天，但第二个完整日历仍然是它打开的同一天。

标签： jquery fullcalendar

【解决方案1】：

我最近遇到了同样的问题并尝试了 once() jQuery 插件，但它对我不起作用。但是，我重新下载了未缩小的源代码，并在 initialRender 方法中添加了以下行作为该方法的第一行，它解决了我的重复日历方法。

element.html('');

我的猜测是我的问题来自这样一个事实，即我在没有刷新页面的情况下在下拉更改中重新初始化日历，这似乎是 js 代码不断地将日历附加到现有 div 而不清除现有日历.

【讨论】：

【解决方案2】：

在缩小版中将a.html(''); 添加到函数f()。
我在一个对话框中打开了我的，每次我点击一个按钮打开都会有另一个日历。
经过一番阅读，我找到了使用方法 - .fullCalendar('destroy') - 这样你就不需要编辑插件了。
现在，在关闭对话框并重新打开时，只会出现一个日历。

【讨论】：

【解决方案3】：

好的，经过一周漫长的错误测试，我找到了这个 jQuery 插件：

一次（）

http://plugins.jquery.com/project/once

一旦应用到 .fullcalendar 之前的#calendar div，问题就解决了，只渲染了一个日历。

工作代码：

jQuery('#calendar').once('calendar').fullCalendar({

... })

【讨论】：

【解决方案4】：

这应该可以做到这一点http://api.jquery.com/one。

类似于@netefficacy（使用 one 而不是 once）：

$('#calendar').one('calendar').fullCalendar({...})

【讨论】：