javascript - FullCalendar fails to load when referencing core and plugins via script tags

I'm trying to use FullCalendar with the premium features (resource grouping in particular), but without the adaptive plugin, and so I'm hoping to do so by referencing the scripts directly per the instructions on the "Initialize with Script Tags" page in the documentation.

Here is the full HTML I am using:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

And here is a codepen link showing the same.

The above does not cause the calendar to be rendered, and the following error appears in the console:

index.global.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'name')
at i (index.global.min.js:6:145213)
at i (index.global.min.js:6:145247)
at index.global.min.js:6:147669
at ps.buildPluginHooks (index.global.min.js:6:147676)
at ps.processRawCalendarOptions (index.global.min.js:6:166319)
at psputeOptionsData (index.global.min.js:6:165669)
at new ps (index.global.min.js:6:160725)
at new e.Calendar (index.global.min.js:6:178434)
at HTMLDocument.<anonymous> (FullCalendarTest.htm:22:24)

I suspect I am misreading the documentation wrt initializing the calendar in this fashion, but can anyone point me to my error please?

Here is the full HTML I am using:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

And here is a codepen link showing the same.

The above does not cause the calendar to be rendered, and the following error appears in the console:

index.global.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'name')
at i (index.global.min.js:6:145213)
at i (index.global.min.js:6:145247)
at index.global.min.js:6:147669
at ps.buildPluginHooks (index.global.min.js:6:147676)
at ps.processRawCalendarOptions (index.global.min.js:6:166319)
at psputeOptionsData (index.global.min.js:6:165669)
at new ps (index.global.min.js:6:160725)
at new e.Calendar (index.global.min.js:6:178434)
at HTMLDocument.<anonymous> (FullCalendarTest.htm:22:24)

I suspect I am misreading the documentation wrt initializing the calendar in this fashion, but can anyone point me to my error please?

Share edited Feb 11 at 11:27 asked Feb 10 at 11:18 MajorRefactoring 3,7633 gold badges22 silver badges27 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

According to the fullCalendar documentation you can just use the "global" bundle - this will initialise the calendar correctly and includes several of the plugins you're including by hand there. It doesn't include any that you haven't already listed in your code.

like this:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr/npm/[email protected]/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

The excellent support team at FullCalendar have answered this one for me:

I found the issue is the "@fullcalendar/premium-common" package is not included, which is a required dependency for premium plugins such as "resource timeline".

Your example is working after including that:

https://codepen.io/acerix/pen/MYWYLKr

So to fix in HTML style:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - FullCalendar fails to load when referencing core and plugins via script tags - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)