title: Destroy fullcalendar on bootstrap tabs click before new calendar is initialized
body: <p>I have two tabs from bootstrap. Fullcalendar is inside the second tab which is by default hidden. So I use the onclick event to trigger the <code>calendar_view_session</code> function. But every time I visit that tab the new calendar appends in the same tabs. Its actually duplicating the calendar.</p>
  
  <pre><code>        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();
  
  },
  </code></pre>
  
  <p>My HTML code</p>
  
  <pre><code>      &lt;div&gt;
  
      &lt;!-- Nav tabs --&gt;
      &lt;ul class="nav nav-tabs" role="tablist"&gt;
        &lt;li role="presentation" class="active"&gt;&lt;a href="#list_view_session" aria-controls="list_view_session" role="tab" data-toggle="tab"&gt;List View&lt;/a&gt;&lt;/li&gt;
        &lt;li role="presentation"&gt;&lt;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"&gt;Calendar View&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
        &lt;div role="tabpanel" class="tab-pane active" id="list_view_session"&gt;
  
  
          &lt;div class="session_list"&gt;
            &lt;div class="loaderapi hide"&gt;
              &lt;i class="fa fa-spinner fa-spin fa-4x" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div role="tabpanel" class="tab-pane" id="calendar_view_session"&gt;
          &lt;div id='calendar'&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my function. However, I use <code>$("#calendar").destroy()</code> function to destroy the calendar first. It shows error saying </p>
  
  <p><code>sessions.js:253 Uncaught TypeError: $(...).destroy is not a function</code></p>
  
  <p>I use this destroy function after </p>
  
  <p><code>var calendarEl = document.getElementById('calendar');</code> line.</p>