【謎エラー】Uncaught TypeError: fullcalendar_1.registerEventSourceDef is not a function

解決したい課題

「Uncaught TypeError: fullcalendar_1.registerEventSourceDef is not a function」というエラーを解決したい。

現状

以下のエラーがでる。

以下のサイトでは、上記の原因は以下のコードがないからだと書いてあた。
https://www.it-swarm.dev/ja/javascript/fullcalendar-[typeerror%EF%BC%9A%EF%BC%88%EF%BC%89%E3%80%82fullcalendar%E3%81%AF%E9%96%A2%E6%95%B0%E3%81%A7%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93/1049449378/](https://www.it-swarm.dev/ja/javascript/fullcalendar-typeerror%EF%BC%9A%EF%BC%88%EF%BC%89%E3%80%82fullcalendar%E3%81%AF%E9%96%A2%E6%95%B0%E3%81%A7%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93/1049449378/)

※エラー内容は同じではないが、似ているので原因は同じかもしれないと思てます。

以下のサイトでも、まず初めに以下のファイルを<head>に記述することだそうです。
https://qiita.com/kotazi_/items/1fb09e3cf1053ca75683

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

私がダウンロードしたpackagesフォルダには上記ファイルがありません(>_<)ぴえん
そこで、jqueryとmomentをダウンロードして、jsフォルダを作成し、格納しました。
https://jquery.com/download/
https://momentjs.com/

fullcalendar.jsは探しても見つかりません。また、記事によってはfullcalendar.min.jsと書いてあるものもありましたが、探してもありません。とりま無視します。

再度、エラー確認すると。。。

ふぇー、最初のエラーが変わらずでています。また、別のエラーまでついてきた。。

どすればいいのか、わかりません。
どなたか、アドバイスなどありましたら、ご教示願います。(>_<)オネガイシマス

追記

コード
※必要最低限の部分だけ抜粋してます。(ナビバーとフッターの記述を削除しただけ)
カレンダは想定通り表示されてますが、入力したカレンダIDのイベントがfullcalendarに反映されず、前述のエラーで苦しんでます。
※ <script src="../cdnjs/gcal.js"></script>をコメントアウトするとエラーは消えます。
※gcal.jsはGoogleカレンダとfullcalendarに同期させるために必要なファイルだと思い、記述しております。以下のサイトを参考にしてました。
https://arts-factory.net/fullcalendar/

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TEST5サイト</title>
    <link rel="stylesheet" href="../css/styles.css">
    <link href='../packages/core/main.css' rel='stylesheet' />
    <link href='../packages/daygrid/main.css' rel='stylesheet' />
    <link href="../packages/timegrid/main.css" rel="stylesheet" />
    <link href="../packages/list/main.css" rel="stylesheet" />
    <script src='../packages/core/main.js'></script>
    <script src='../packages/daygrid/main.js'></script>
    <script src="../packages/core/locales-all.js"></script>
    <script src="../packages/interaction/main.js"></script>
    <script src="../packages/timegrid/main.js"></script>
    <script src="../packages/list/main.js"></script>
    <script src="../cdnjs/gcal.js"></script>
    <!-- <script src='../js/jquery.min.js'></script> -->
    <!-- <script src='../js/moment.min.js'></script> -->
    <meta name="description" content="テスト">
    <link rel="icon" href="../img/favicon.ico">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
          header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
          },
          locale: 'ja',
          businessHours: true,
          navLinks: true,
          eventTimeFormat: { hour: 'numeric', minute: '2-digit' },
          googleCalendarApiKey: '(ここはAPIキー入力してます)',
          googleCalendarId: '(ここはカレンダID入力してます)'
        });
        calendar.render();
      });
    </script>
    <style>
      body {
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
      }
      #calendar {
        max-width: 900px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    </header>
    <section class="TEST5">
    <div id='calendar'></div>
    </section>
  </body>
  </html>

gentaro

2020/06/08 14:36

あなたがどんなコードを書いているのかわからないと誤っている箇所を特定できません。質問文を修正して、現象が再現する最低限のコードを提示しましょう。

narururu

2020/06/08 15:02

ご回答ありがとうございます。gentaroさん☺ 事象が再現する最低限のコードを追記しました。 gcal.jsを読み込む記述をするとエラーになり、コメントアウトするとエラーは消えます。ただし、今回私が実施したいことは、Googleカレンダのイベント情報をfullcalendarに反映させることで、gcal.jsは、そのために必要なファイルの認識です。

行動規範の内容に同意します

回答1件

ベストアンサー

あなたが作成しているHTML文書もCSS文書も全体が不明なので、確かなことは言えませんが。
-> その後公開された

fullcalendar.jsは探しても見つかりません。また、記事によってはfullcalendar.min.jsと書いてあるものもありましたが、探してもありません。とりま無視します。

いやいや、そこが肝心のところでしょう。無視してどうすんの。

こういうときは、本家のドキュメントに当たってください。
Initialize with Script Tags
を見ると、

html
1    <script src='fullcalendar/core/main.js'></script>
2    <script src='fullcalendar/daygrid/main.js'></script>

といった記述が見つかるので、おそらくバージョンアップによってスクリプトが機能別に分割され、fullcalendar.jsはなくなったのでしょう。プラグイン方式で必要な機能だけを組み込めるようにしたのだと推測されます。

追加分:
バージョン4系列を使っていると判明したので、公式サイトの
events from Google Calendar
のバージョン4向けの情報を紹介した。
概略は、gcal.jsを使わずに、本体に付属するgoogle-calendar/main.jsを読み込み、プラグイン「googleCalendar」を組み込むというもの。

投稿2020/06/08 14:36

編集2020/06/08 16:04

Daregada

総合スコア11990

narururu

2020/06/08 15:07

ご回答ありがとうございます。Daregadaさん☺ 確かに、無視するところではなかったです????失礼しました。本家のドキュメントでは確かにそうですね。本当に必要最低限のファイルだけ読み込む記述になっております。今回私のfullcalendarはレイアウトを変更するために、いくつか必要なファイルを追加しております。エラーが出る原因は、gcal.jsを記述しているからなのですが、Googleカレンダからfullcalendarへイベントを反映させるためには必要なファイルだと思い、記述してました。

Daregada

2020/06/08 15:42

ええと、あなたが参考にしているサイトの情報は、どれもバージョンが古い(2.1.1とかの)Fullcalendar用でして、最新版(を使ってるんですよね? どこにも書いてないけど)のFullcalendarでは役に立ちません。 events from Google Calendar https://fullcalendar.io/docs/v5/google-calendar を見ると、gcal.jsを**使わずに**、Fullcalendar本体に付属する fullcalendar/google-calendar/main.js を利用する方法が解説されているので、おそらくこれが最新版でのやり方です。 APIキーの取得とか面倒なんで検証していませんが。

narururu

2020/06/08 15:51

私のfullcalendarはversion4.4.2でした。 URLありがとうございます！そいえば、当初、こちらのページを見ながら進めていたのですが、いろいろ調べものしてたら、こちらの存在忘れてました。よーし、こちらのページに沿っても一度チャレンジしてみます！夜分にも関わらず、ありがとうございます????

Daregada

2020/06/08 15:56

上記のページ、右上のメニューみたいなやつでバージョンを切り替えられます。 v4に切り替えてもv5と同様にgoogle-calendar/main.jsを利用する方法が解説されていますね。

narururu

2020/06/08 15:58

Daregadaさん！！！できましたよーー！！ちゃんと反映されました！すごい！本当にありがとうございます(泣) とても助かりました????

narururu

2020/06/08 16:00

これからは公式サイトをもっと読み込む努力をしますね！

行動規範の内容に同意します