title: Uncaught TypeError: $(...).fullCalendar is not a function error
body: <p>I have a small code with FullCalendar library displaying 2 calendars. One on the first tab, one on the 2nd tab. Both calendars show up, however, the one that is invisible when the page loads is not showing up properly.</p>
  <p><a href="https://i.stack.imgur.com/VKM2a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKM2a.png" alt="enter image description here" /></a></p>
  <p>Full code: <a href="https://codepen.io/MadBoyEvo/pen/rNxQQYP" rel="nofollow noreferrer">https://codepen.io/MadBoyEvo/pen/rNxQQYP</a></p>
  <p>So I thought I would do a refresh or quickly change the view from current to new one and back to current on a tab switch but whatever  I do it doesn't work.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;var tabs = tabbis.init({
          tabGroup: &quot;[data-tabs]&quot;,
          paneGroup: &quot;[data-panes]&quot;,
          tabActive: &quot;active&quot;,
          paneActive: &quot;active&quot;,
          callback: function (tab, pane) {
              // console.log(&quot;TAB id:&quot; + tab.id);
              // console.log(pane.id);
              // console.log(tableid);
              // this makes sure to refresh tables on tab change to make sure they have buttons and everything
              // it's a bit heavy as it touches all tables, may require some improvements in future to consider
              // which tab has which table
              try {
                  var tableid = document.getElementById(tab.id + &quot;-Content&quot;).querySelector('table[id^=&quot;DT-&quot;]').id;
                  $(&quot;#&quot; + tableid).DataTable().columns.adjust().responsive.recalc();
              } catch (e) {
                  console.log('No datatables available.');
              }
              
              // this code here doesn't work
              var view = $('#Calendar-on26xq0w').fullCalendar('getView');
              alert(&quot;The view's title is &quot; + view.title);
          }
      });
  
      // in theory should take care of removing local storage for tabbis
      // some errors occurs if the local storage is not cleaned after a while
      window.addEventListener(&quot;unload&quot;, tabbis.remove, false);
  &lt;/script&gt;&lt;!-- JS Elastic Tabbis END --&gt;
  </code></pre>
  <p>The error shows up: <code>Uncaught TypeError: $(...).fullCalendar is not a function</code></p>
  <p>I tried moving calendar.js script from top to bottom, to before or after the script code that fails but nothing is helping.</p>
  <p>I am a bit of JS noob so it's a bit unclear to me why it doesn't work. I used similar approach for DataTables (the Try/catch) and it works fine (if there is DataTable loaded)</p>
  <p>Edit:</p>
  <p>I've tried searching for calendar id - and I can find it, yet the same error is visible on that 3rd line.</p>
  <pre><code>var calendarid = document.getElementById(tab.id + &quot;-Content&quot;).querySelector('div[id^=&quot;Calendar-&quot;]').id;
  alert(&quot;The calendarid &quot; + calendarid);
  var view = $('#' + calendarid).fullCalendar('getView');
  alert(&quot;The view's title is &quot; + view.title);
  </code></pre>