質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,744

score 128

解決したい課題

「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/
イメージ説明

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

以下のサイトでも、まず初めに以下のファイルを<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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gentaro

    2020/06/08 23:36

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

    キャンセル

  • narururu

    2020/06/09 00:02

    ご回答ありがとうございます。gentaroさん☺

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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

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


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/09 00:56

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

    キャンセル

  • 2020/06/09 00:58

    Daregadaさん!!!
    できましたよーー!!
    ちゃんと反映されました!すごい!

    本当にありがとうございます(泣)
    とても助かりました👓

    キャンセル

  • 2020/06/09 01:00

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る