【fullcalendar】fullcalendarが表示されません

解決したい課題

fullcalendarを表示させたい。

参考URL

https://www.fenet.jp/dotnet/column/tool/1020/

コード

参考URLを基にhtmlに記述

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TEST5サイト</title>
    <link rel="stylesheet" href="../css/styles.css">
    <link href='..package/core/main.css' rel='stylesheet' />
    <link href='..package/daygrid/main.css' rel='stylesheet' />
    <script src='..package/core/main.js'></script>
    <script src='..package/daygrid/main.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: [ 'dayGrid' ]
        });
        calendar.render();
      });
    </script>
  </head>
  <header>
    <nav>
      <ul class="nav">
        <li><a href="index.html">TEST1</a></li>
        <li><a href="test2.html">TEST2</a></li>
        <li><a href="test3.html">TEST3</a></li>
        <li><a href="test4.html">TEST4</a></li>
        <li><a href="test5.html">TEST5</a></li>
        <li><a href="test6.html">TEST6</a></li>
      </ul>
    </nav>
  </header>
  <body>
    <section class="TEST5">
      <div>
        <h1>TEST5</h1>
        <p>テストテストテストテストテストテストテストテストテストテストテスト</p>
      </div>
      <div id='calendar-view'></div>
    </section>

  </body>
  <footer>
    <div>
      <p>copyright naru</p>
    </div>
  </footer>
  </html>

現状

コードを記述する前と何も変化なし。
公式ページから「package」をダウンロードし、htmlフォルダと同様の階層に配置した。htmlフォルダ配下でも試した。
https://fullcalendar.io/

参考URLの情報を基に記述したにも関わらずカレンダーが表示されないのは、コード以外の部分で何か問題点があるのでしょうか。
どなたか、アドバイスお願いできますでしょうか(>_<)ヘルプミー

追記

main.jsはダウンロードしたファイルなのに、なぜエラーになるのだ。。

kei344

2020/06/08 02:12

前の質問からhttpのルートフォルダを変えましたか？

narururu

2020/06/08 02:20

こんにちは！kei344さん☺ 昨日に続き、ありがとうございます。今はローカル環境で動作確認中でして、フォルダの階層は上記画像の通りで問題なく表示されております。カレンダーのみが表示されていない状況です。

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

回答2件

パスの記述ミス(/の書き忘れやsの付け忘れ)は解決しているからいいとして、カレンダーを入れる目印にdiv要素に設定したid属性の値「calendar-view」と、イベントリスナーが探しているid属性の値「calendar」が一致してないので、「そんなidはねえぞ」とエラーが出ており、カレンダーが表示されていません。

main.jsはダウンロードしたファイルなのに、なぜエラーになるのだ。。

「calendar」が見つからないのでdocument.getElementById('calendar');にnullが返っているのが原因。ぶっちゃけあなたのせいです。

あと、今回のエラーとは関係ありませんが、header要素とfooter要素は、どちらもbody要素の内容に入れてください。

投稿2020/06/08 03:18

Daregada

総合スコア11990

narururu

2020/06/08 04:07

ご回答ありがとうございます。Daregadaさん☺ ご指摘いただいた箇所が原因でカレンダが表示されていなかったようです。 IDを一致させましたら解決しました。ありがとうございます。今回のエラーは私の確認不足と勉強不足も原因の1つだと思いますので、も一度勉強しなおします。ありがとうございました????

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

ベストアンサー

../では。あと、エラーを確認して質問の際はそのエラーも提示しましょう。

Path
1../package/core/main.css

【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error

投稿2020/06/08 02:24

kei344

総合スコア69606

narururu

2020/06/08 02:34 編集

ありま、/抜けてた。。大変失礼いたしました。修正してリロードしましたが、エラー内容は、・「packageフォルダないヨ」・「HTMLにFullcalendar定義されてないヨ」と言っております(>_<) ※エラー画像を追記しました。ぐぬぬ、この辺りを調べてみます。。

kei344

2020/06/08 02:42

> ・「HTMLにFullcalendar定義されてないヨ」パスが通ってから気にすればよいです。ドキュメントフォルダの中に日本語で書かれたフォルダがあって、その中にpackageフォルダがあって、coreフォルダがあって、main.cssがあるかを確認してください。フォルダ構成を間違っていたりファイル名が間違っていたり、そういう状態です。

narururu

2020/06/08 02:43

1点目のエラーは誤字でした。。 package→packagesに修正後、エラー解決しました。しかし、また違うエラーが表示され、今はこちらを対応中です。 ※追記欄に新規エラー画像をのせました。

kei344

2020/06/08 02:52

document.getElementById('calendar'); ↑そんなidどこにも無い。

narururu

2020/06/08 04:05

アドバイス、ありがとうございます。おっしゃる通り、IDの不一致でした。いろいろと勉強しなおします。 kei344さんのおかげで心が折れずになんとか表示させるところまでできてよかたです！ほんとにありがとうございました????

narururu

2020/06/08 04:08

一番多くのやりとりをさせていただきましたので、今回のベストアンサーはkei334さんにさせていただきます。