javascript - Full Calendar is not loading automatically in Bootstrap Tab?

I'm working on travelling website where I used a bootstrap tab. In first tab there is some content and in second tab I showed a full calendar js. All is working fine but when I show full calendar in first tab it working perfectly but when I show it in second tab it not loaded automatically but instead of that when I hit on month button or left right arrow it loaded.

Unable to figure out the issue. Below is the plete code:

  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: '/',
        start: '2019-08-28'
      }
    ]
  });

  calendar.render();
 });

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href=".1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src=".3.1/jquery.min.js"></script>
<script src=".3.1/js/bootstrap.min.js"></script>
<script src="/@fullcalendar/[email protected]/main.min.js"></script>
<script src="/@fullcalendar/[email protected]/main.min.js"></script>
<script src="/@fullcalendar/[email protected]/main.min.js"></script>
<script src="/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

Unable to figure out the issue. Below is the plete code:

  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google./',
        start: '2019-08-28'
      }
    ]
  });

  calendar.render();
 });

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

Share Improve this question edited Sep 5, 2019 at 20:44 asked Sep 4, 2019 at 20:31 Code GuruDev 4155 silver badges13 bronze badges

Possible duplicate of FullCalendar Within Twitter Bootstrap Tabs – Diego Fortes Commented Sep 4, 2019 at 20:47
no you stated the 5 year old version which is not applicable here. – Code GuruDev Commented Sep 4, 2019 at 21:08
1 It might be an old version but to me it seems that the point is the same - you have to render the calendar each time you show the tab, or make sure the calendar tab is not hidden to begin with. – ADyson Commented Sep 4, 2019 at 23:11

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

FullCalendar will not load if the div can't be seen (is with display: none; for instance).

The alternative is to listen to the #menu1 and, when it's visible, run calendar.render().

Alternatively, you can initiate the app having the calendar being the visible screen, like this:

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

 document.addEventListener('DOMContentLoaded', function() {
  var calendarButton = document.getElementById('calendarButton');
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google./',
        start: '2019-08-28'
      }
    ]
  });


calendar.render();

 });

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li ><a data-toggle="tab" href="#home">Home</a></li>
  <li><a id="calendarButton" data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

Thanks to all of you who help to solve this issue. Below is the my version of solution that works for me fine:

  $(document).ready(function() {

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['interaction', 'dayGrid', 'timeGrid'],
      defaultView: 'dayGridMonth',
      defaultDate: '2019-09-06',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay' },

    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google./',
        start: '2019-08-28'
      }
    ]
});
    calendar.render();
    $('.nav-tabs li a').click(function(){
      calendar.render();
    });
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg./@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg./@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active show">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade show">
    <h3>Calendar loaded when you double click on second tab link</h3>
    <div id='calendar'></div>
  </div>
</div>

As a workaround, you can use one() event (which is identical to .on(), except that the handler for a given element and event type is unbound after its first invocation. docs):

$('#menu1').one('click', function(){
  $(this).click();
  calendar.render();
});

By this, the first click will trigger another click that displays the tab, then will render the calendar.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744291992a4567077.html

javascript - Full Calendar is not loading automatically in Bootstrap Tab? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Full Calendar is not loading automatically in Bootstrap Tab? - Stack Overflow

3 Answers 3

相关推荐