title: FullCalendar v4 - fullCalendar is not a function
body: <p>I'm using FullCalendar 4.3.1 . Calendar is displayed correctly but, I can´t add event dynamically. And I get this error: 
  When using JQuery:</p>
  
  <blockquote>
    <p>TypeError: $(...).fullCalendar is not a function</p>
  </blockquote>
  
  <p>I try it without JQuery and still not working:</p>
  
  <blockquote>
    <p>TypeError: document.getElementById(...).fullCalendar is not a function</p>
  </blockquote>
  
  <p>I have this page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
  
          &lt;link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' /&gt;
          &lt;link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' /&gt;
          &lt;link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' /&gt;
          &lt;link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' /&gt;
  
          &lt;script src='libs/fullcalendar/core/main.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/core/locales/sk.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/interaction/main.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/daygrid/main.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/timegrid/main.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/list/main.js'&gt;&lt;/script&gt;
          &lt;script src='libs/fullcalendar/moment/main.js'&gt;&lt;/script&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
          
          &lt;script&gt;
              
  
      document.addEventListener('DOMContentLoaded', function () {
          var calendarEl = document.getElementById('calendar');
  
          var calendar = new FullCalendar.Calendar(calendarEl, {
              plugins: ['moment', 'interaction', 'dayGrid', 'timeGrid', 'list'],
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay'
              },
              locale: 'sk'
          });
  
          calendar.render();
      });
  
  
      function addEventToCalendar()
      {
          $('#calendar').fullCalendar('renderEvent', {
              title: 'dynamic event',
              start: new Date(),
              allDay: true
          });
          
          //not working too
          /*
          document.getElementById('calendar').fullCalendar('renderEvent', {
              title: 'dynamic event',
              start: new Date(),
              allDay: true
          });
           */
      }
  
  &lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div style="margin-top: 10px"&gt;
              &lt;a onclick="addEventToCalendar()"&gt;
                  &lt;i class="fas fa-calendar-alt calendarButtonText"&gt;&lt;/i&gt; Add event
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id='calendar' &gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where is the problem?</p>