在初始化新日历前销毁 bootstrap 个选项卡上的完整日历

Question

我有两个来自 bootstrap 的标签。 Fullcalendar 位于第二个选项卡内，默认情况下是隐藏的。所以我使用onclick事件来触发calendar_view_session函数。但每次我访问该选项卡时，新日历都会附加到相同的选项卡中。它实际上是在复制日历。

        calendar_view_session: function(){
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      defaultDate: '2019-04-12',
      navLinks: true, // can click day/week names to navigate views
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events:  function(info, successCallback,failureCallback) {
            console.log(info);

            var date1 = new Date(info.start.valueOf());
            var date2 = new Date(info.end.valueOf());

            var callData = {
                from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
                to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
            }
            sessionCalendar = [];
            console.log(callData);
            $.ajax({
                  url:app.createApiPath(apiController_data,apiAction_data),
                  method:"POST",
                  dataType: "json",
                  data: {
                        callData: JSON.parse(JSON.stringify(callData)),
                        api_version: 1,
                        deviceType: 'web'
                    },
                  success: function(responseData){
                    console.log({responseData})
             successCallback(app.calendarParse(responseData.data.results));

                }
            })

          },
          //sessionCalendar
    });

    calendar.render();

},

我的HTML代码

      <div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#list_view_session" aria-controls="list_view_session" role="tab" data-toggle="tab">List View</a></li>
      <li role="presentation"><a href="#calendar_view_session" id="calendar_view_session_id" onclick="app.calendar_view_session()" aria-controls="calendar_view_session" role="tab" data-toggle="tab">Calendar View</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="list_view_session">


        <div class="session_list">
          <div class="loaderapi hide">
            <i class="fa fa-spinner fa-spin fa-4x" aria-hidden="true"></i>
          </div>
        </div>

      </div>
      <div role="tabpanel" class="tab-pane" id="calendar_view_session">
        <div id='calendar'></div>
      </div>
    </div>

  </div>

这是我的职责。但是，我使用 $("#calendar").destroy() 函数先销毁日历。它显示错误

sessions.js:253 Uncaught TypeError: $(...).destroy is not a function

我在

之后使用了这个销毁函数

var calendarEl = document.getElementById('calendar');行。

Answer 1

您应该运行 calendar 上的 destroy 方法，而不是 DOM 中的元素。

尝试使用 window.calendar.destroy()。

在此处查看文档：https://fullcalendar.io/docs/destroy

Answer 2

错误很明显，fullcalendar 中不存在 destroy 方法，相反，您执行：

$('#calendar').fullCalendar( 'destroy' );

这是一个fiddle

更新：

在实例化 fullcalendar 之前，您可能需要在每次单击选项卡时清空容器元素。

$('#calendar').html('');

你的情况是：

calendar_view_session: function () {
    var calendarEl = document.getElementById('calendar');
    $('#calendar').html('');
    // your long code goes here...
    calendar.render();
}

注意：您可能需要超时才能呈现您的日历。

最后更新

// very global, outside of your context:
var calendar = null;

calendar_view_session: function () {
        var calendarEl = document.getElementById('calendar');
        if (calendar) {
            calendar.destroy();
        }
        calendar = new FullCalendar.Calendar(calendarEl, { ... });
        calendar.render();
},

在初始化新日历前销毁 bootstrap 个选项卡上的完整日历

Destroy fullcalendar on bootstrap tabs click before new calendar is initialized

javascript

jquery

fullcalendar

fullcalendar-4