Search code examples
javascriptjqueryfullcalendarfullcalendar-4

FullCalendar v4 - fullCalendar is not a function

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:

TypeError: $(...).fullCalendar is not a function

I try it without JQuery and still not working:

TypeError: document.getElementById(...).fullCalendar is not a function

I have this page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' />

        <script src='libs/fullcalendar/core/main.js'></script>
        <script src='libs/fullcalendar/core/locales/sk.js'></script>
        <script src='libs/fullcalendar/interaction/main.js'></script>
        <script src='libs/fullcalendar/daygrid/main.js'></script>
        <script src='libs/fullcalendar/timegrid/main.js'></script>
        <script src='libs/fullcalendar/list/main.js'></script>
        <script src='libs/fullcalendar/moment/main.js'></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        
        <script>
            

    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
        });
         */
    }

</script>


    </head>
    <body>

        <div style="margin-top: 10px">
            <a onclick="addEventToCalendar()">
                <i class="fas fa-calendar-alt calendarButtonText"></i> Add event
            </a>
        </div>
        <div id='calendar' ></div>
    </body>
</html>

Where is the problem?

Solution

  • I don't think you're accessing the calendar object correctly. 

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />


  <title>
    Add an event dynamically - Demos | FullCalendar
  </title>


<link href='/assets/demo-to-codepen.css' rel='stylesheet' />


  <style>

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

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

  </style>


<link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />


  <link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />


<script src='/assets/demo-to-codepen.js'></script>

<script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'></script>




  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'></script>



  <script>

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      defaultView: 'dayGridMonth',
      header: {
        center: 'addEventButton'
      },
      customButtons: {
        addEventButton: {
          text: 'add event...',
          click: function() {
            var dateStr = prompt('Enter a date in YYYY-MM-DD format');
            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

            if (!isNaN(date.valueOf())) { // valid?
              calendar.addEvent({
                title: 'dynamic event',
                start: date,
                allDay: true
              });
              alert('Great. Now, update your database...');
            } else {
              alert('Invalid date.');
            }
          }
        }
      }
    });

    calendar.render();
  });

</script>

</head>
<body>
  <div class='demo-topbar'>

  
  
</div>

  <div id='calendar'></div>
</body>

</html>

    Review the source code on this demo page: https://fullcalendar.io/docs/Calendar-addEvent-demo