Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

I have been working on a travel website and incorporated a bootstrap tab feature. In the first tab, I have some content, while in the second tab, I've added a full calendar with JavaScript. Everything seems to be functioning correctly when the full calendar is displayed in the first tab, but it does not load automatically when placed in the second tab. Instead, it only loads when the user interacts by clicking on the month button or navigation arrows.

I am struggling to identify the root of this issue. Below is the complete code snippet:

  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: [
                    // Event data here
                ]
            });

            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="Bootstrap CSS link" rel="stylesheet"/>
<link href="FullCalendar Main CSS links" rel="stylesheet/>
<script src="jQuery link"></script>
// Other script links here

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

javascriptjqueryhtmlcssfullcalendar

Answer №1

When FullCalendar is placed within a div that is hidden (using display: none; for example), it will not load.

An alternative approach is to monitor the visibility of #menu1 and trigger calendar.render() when it becomes visible.

Another option is to have the calendar as the initially visible screen in your app, 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.com/',
        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.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cbc7dacde89c869b8699">[email protected]</a>/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ede8f0eefbe0edc9bda7baa7b9">[email protected]</a>/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7f62666e6c79626f4b3f2538253b">[email protected]</a>/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88b879a8da8dcc6dbc6d9">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95fcfbe1f0e7f4f6e1fcfafbd5a1bba6bba5">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e6e3fbe5f0ebe6c2b6acb1acb2">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99edf0f4fcfeebf0fdd9adb7aab7a9">[email protected]</a>/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>

Answer №2

Big shoutout to everyone who contributed to solving this problem. Here's my customized solution that has been working smoothly for me:

  $(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.com/',
        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.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30535f425570041e031e01">[email protected]</a>/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4e4b534d58434e6a1e0419041a">[email protected]</a>/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1a07030b091c070a2e5a405d405e">[email protected]</a>/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23404c514663170d100d12">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d747369786f7c7e697472735d29332e332d">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8febeef6e8fde6ebcfbba1bca1bf">[email protected]</a>/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e195888c8486938885a1d5cfd2cfd1">[email protected]</a>/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>Double click the second tab link to load the calendar here</h3>
    <div id='calendar'></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on eliminating the gap between the dropdown menu in Firefox browser

After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...

htmlcss

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

htmlcssvertical-alignment

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

My current challenge involves retrieving URL parameters successfully and using them to decide which iframe src to populate. Additionally, I need to autofill the form created via the form src with other parameters. However, I am faced with two main issues. ...

javascriptiframedynamiconloadautofill

Stop Jade from collapsing the directory hierarchy

When it comes to implementing a build solution using NPM scripts instead of Gulp or Grunt, I have been facing some challenges in managing multiple Jade files efficiently. I've referred to resources like and for guidance. The Jade CLI allows for com ...

javascriptnode.jsnpmpug

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

The functionality of the JavaScript click function is limited to a single execution

In my dropdown menu, I have a submit function that triggers whenever any children of the dropdown are clicked. However, I now need to exclude a specific li element from this function because it requires inserting a tracking ID in a popup iFrame. The code ...

javascriptjqueryhtml

Adding jQuery namespace to AngularJS

I'm facing a bit of an issue here. I've implemented RequireJS to manage my modules and dependencies. To prevent cluttering the global namespace, I've set up the following configuration to avoid declaring $ or jQuery globally: require.confi ...

javascriptjqueryangularjsrequirejs

Can a HTML div be created with an animation and a hover-scale effect added to it?

I experimented with using divs as clickable buttons that direct to another page on my website. I added animations to make them rotate into view when the site is loaded. Now, I'm trying to implement a hover effect that will scale the buttons when hover ...

htmlcssanimationhovercss-animations

What is the process for incorporating a new method into an object that already exists?

class Person { constructor(name, age) { this.name = name; this.age = age; } sayName() { alert(this.name); } } // Create three instances of the Person class with some made-up data const p1 = new Person('Alice', 25); const p ...

javascript

Steps to animate a div expanding to fit its content dimensions

I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in hei ...

jquerycssanimation

Manage shared nested modules across different modules in Vuex without redundancy

In my Vue.js application, I am using Vuex as the state manager. To ensure that certain states are shared across different components, I have created a nested state containing all the common information. This allows me to import it into multiple modules. F ...

javascriptvue.jsvuex

Transform an array into an object with assigned key names

How can we transform the following array: [2019,2020,2021] into the format: { 0: {year:2019}, 1: {year:2020}, 2: {year:2021} } ...

javascriptnode.jsarraysobjectecmascript-2018

"Exploring the magic of product galleries: A behind-the-scenes look at how websites create images

Have you ever wondered how this website creates the customization effect in its gallery? When you adjust the color, stones, or other attributes of the ring, it appears as though a new image is being generated. (click Customize) Do you believe they have a ...

javascripthtml3dvml

Instructions for attaching an event listener to a Threejs Mesh Object with the help of threex dom events

var domEvents = new THREEx.DomEvents(camera, view.domElement); var div = document.createElement( 'div' ); div.setAttribute('data-remove','mesh1'); div.className = 'close-me'; var label = new THREE.CSS2DObje ...

javascriptthree.jsdom-eventsonclicklistener

Creating a JSON file using the attributes and values of HTML tags

I am seeking assistance in generating a JSON file from HTML data using jQuery. The HTML structure consists of multiple departments with similar tags and classes: <div class="department_one"> <h1>Name Of Manufacturer</h1> < ...

jqueryhtmlajaxjson

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

Encountering a NodeJS crash when executing MySQL queries

Exploring NodeJS for the first time and experimenting with MySQL. Successfully retrieving content from the database to display on my page (/test01). Encountering a crash when attempting to fetch values from the database in order to store them in a cookie ...

javascriptmysqlnode.js

Tips for organizing AJAX code to show images and videos in HTML with a switch case approach

I have 2 tables, one for images and one for videos. Within my HTML code, I have three buttons: slide_image, video, and single_image. Using iframes, I am able to load images and videos on the same page. When I click on the slide_image button, it displays im ...

javascriptphphtmlajax

Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules: .split-pane > .split-pane-divider { -fx-padding: 0 0 0 1; -fx-background-color:-fx-background; } However, during runtime, I e ...

javacssjavafx