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 calendar_view_session function. But every time I visit that tab the new calendar appends in the same tabs. Its actually duplicating the calendar.

        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) {

            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 = [];
                  dataType: "json",
                  data: {
                        callData: JSON.parse(JSON.stringify(callData)),
                        api_version: 1,
                        deviceType: 'web'
                  success: function(responseData){





My HTML code


    <!-- 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>

    <!-- 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 role="tabpanel" class="tab-pane" id="calendar_view_session">
        <div id='calendar'></div>


This is my function. However, I use $("#calendar").destroy() function to destroy the calendar first. It shows error saying

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

I use this destroy function after

var calendarEl = document.getElementById('calendar'); line.

2 Answers

Radonirina Maminiaina On Best Solutions

The error is clear, the method destroy doesn't exist into fullcalendar, instead, you do:

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

Here's a fiddle


Before you instantiate fullcalendar, you probably need to empty the container element everytime you click your tab.


In your case you do:

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

NB: You may need timeout to render your calendar.

Final update

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

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

You should run the destroy method on calendar rathern then on the element in the DOM.

Try to use window.calendar.destroy() instead.

Have a look at the docs here: https://fullcalendar.io/docs/destroy