googleカレンダーをfullcalendarを使ってカスタマイズさせたいです。

前提・実現したいこと

googleカレンダーをfullcalendarを使ってカスタマイズさせたいです。
ネットで紹介させている方法などでやってみたのですが、カレンダー自体が表示されません。
【追記】
fullcalendarのバージョンは3.9.0を使用しています。
本当は最新版を使いたいなとおもっていたんですが（特に意味はなく、最新のほうがいいかな？程度の気持ち）
難しかったので、ネットで紹介されていた方と同じバージョンでやってみました。すみません、初心者すぎて....

該当のソースコード

.
.
.
.
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<!--↑slickです。-->

<link rel="stylesheet" type="text/css" href="fullcalendar/fullcalendar.css">
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
<script src="fullcalendar/gcal.min.js"></script>
<script src="fullcalendar/locale/ja.js"></script>
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },
      displayEventTime: false, 
      googleCalendarApiKey: 'APIキー（伏せます）',
      events: 'idキー（伏せます）',
      eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
      },
      loading: function(bool) {
        $('#loading').toggle(bool);
      }
    });
  });
</script>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<ul class="fv-slider">
	<li><img class="slider" src="images/home/fv01.jpg" alt=""></li>
	<li><img class="slider" src="images/home/fv02.jpg" alt=""></li>
	<li><img class="slider" src="images/home/fv05.jpg" alt=""></li>
</ul>

<ul class="responsive">
	<li class="item">
		<img class="img" src="images/home/lineup_img02.jpg" alt="">
		<h3 class="name text-center">○○</h3>
		<p class="txt">○○</p>
	</li>
	<li class="item">
		<img class="img" src="images/home/lineup_img03.jpg" alt="">
		<h3 class="name">○○</h3>
		<p class="txt">○○</p>
	</li>
	<li class="item">
		<img class="img" src="images/home/lineup_img01.jpg" alt="">
		<h3 class="name">○○</h3>
		<p class="txt">○○</p>
	</li>
</ul>
<section>
    <h3>カレンダー</h3>
    <div id="calendar"></div>
</section>


</footer>

<--slickです↓-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<script type="text/javascript">
	$(function(){
	  $('.fv-slider').slick({
	  autoplay: true,
	  infinite: true,
	  speed: 500,
	  fade: true,
	  cssEase: 'linear',
	  arrows: false,
	  });
	});

	/*lineup*/


  $('.responsive').slick({
	  slidesToShow: 3,
	  dots: true,
	  dotsClass: 'slick-dots',
	  arrows: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
        }
      },
      {
        breakpoint: 640,
        settings: {
		slidesToShow: 1,
		arrows: false,
		dots: false,
        }
      },
    ]
	  
  });
 </script>
</body>

試したこと

ソースコードを</body>直前にもっていったりしましたがでてこないんですよね。正しく読み込めてないのでしょうか....
【追記】
ファイル、フォルダともに存在しています。ちなみに、今作っているものとは別に新規でhtmlにfullcalendarに必要な内容のみコピペしたところ、表示されました。
※関係ないかもしれませんが、slickスライダーも読み込んでいます。

Daregada

2020/06/16 09:12

使用しているfullcalendarのバージョンを明記してください。

hanayammmm

2020/06/16 12:45

fullcalendarのバージョンは3.9.0を使用しています。すみません、明記しておりませんでした… 内容追記しなおしました！！

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

回答1件

ベストアンサー

fullcalendar 3.9.0でローカルにページを作ってみたらカレンダーは表示されました。
(gcal.jsの部分はAPIキーが面倒なので検証していません)

ということで、

HTMLファイルが置かれたフォルダーにfullcalendarフォルダーが存在するか
fullcalendarフォルダーに、fullcalendar.css, fullcalendar.min.js, gcal.min.jsが存在するか
fullcalendar/libフォルダーが存在し、そこにmoment.min.js, jquery.min.jsが存在するか
fullcalendar/localeフォルダーが存在し、そこにja.jsが存在するか

をチェックしてみてください。

追加分:
ええと、HTML文書の後のほうで、slick用のスクリプトを書いているところで、jQueryを再度読み込もうとしていますね。jQueryは上部ですでにjquery.min.jsを読んでいるので、これが原因じゃないかな。偶然ですが、両者のバージョンが一致しているので、最初のjQueryを読んでいる部分だけで動くはずです。

HTML
1    <!--slickです↓-->
2    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
3    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

余談だけど、「slickです」のところがコメントになっていませんでした。

投稿2020/06/16 13:21

編集2020/06/17 09:55

Daregada

総合スコア11990