FullCalendar実装でカレンダーを表示させたい。

Question

前提・実現したいこと

カレンダーを表示させたい。

発生している問題・エラーメッセージ

【Rails】 5分でFullCalendar実装する方法（下記URL）を試した。
https://qiita.com/imotan/items/c73fab5ee230114a08b6

Eventを作成、編集、削除させる機能は実装できたが、肝心のカレンダーを出すことができない。

該当のソースコード

Rails のバージョンは6.0.0を指定
scaffold で Eventモデルを作成しました。

ターミナル

// Rails アプリケーション作成
$ rails _5.2.4.2_ new five_min_fullcalendar
$ cd five_min_fullcalendar

// scaffold で Event モデルを作成
$ rails g scaffold event title:string body:string start_date:datetime end_date:datetime
$ rails db:migrate RAILS_ENV=development

GemFile へ3つのgemを追加してbundle install

gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

fullcalendar の部分を追加

*= require_tree .
 *= require_self
 *= require fullcalendar
 */

fullcalendar の部分を追加

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require jquery
//= require moment
//= require fullcalendar

$(function () {
    // 画面遷移を検知
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

            function Calendar() {
                return $('#calendar').fullCalendar({
                });
            }
            function clearCalendar() {
                $('#calendar').html('');
            }

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json', 以下に追加
            $('#calendar').fullCalendar({
                events: '/events.json',
                //カレンダー上部を年月で表示させる
                titleFormat: 'YYYY年 M月',
                //曜日を日本語表示
                dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
                //ボタンのレイアウト
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //終了時刻がないイベントの表示間隔
                defaultTimedEventDuration: '03:00:00',
                buttonText: {
                    prev: '前',
                    next: '次',
                    prevYear: '前年',
                    nextYear: '翌年',
                    today: '今日',
                    month: '月',
                    week: '週',
                    day: '日'
                },
                // Drag & Drop & Resize
                editable: true,
                //イベントの時間表示を２４時間に
                timeFormat: "HH:mm",
                //イベントの色を変える
                eventColor: '#87cefa',
                //イベントの文字色を変える
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

JSONファイルを作成して、FullCalendarのライブラリへそのJSONファイルを渡す

# json.array! @events, partial: "events/event", as: :event
json.array!(@events) do |event|
  json.extract! event, :id, :title, :body
  json.start event.start_date
  json.end event.end_date
  json.url event_url(event, format: :html)
end

id が calendar の div 要素を一番下に追加

<p id="notice"><%= notice %></p>

<h1>Events</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Body</th>
      <th>Start date</th>
      <th>End date</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @events.each do |event| %>
      <tr>
        <td><%= event.title %></td>
        <td><%= event.body %></td>
        <td><%= event.start_date %></td>
        <td><%= event.end_date %></td>
        <td><%= link_to 'Show', event %></td>
        <td><%= link_to 'Edit', edit_event_path(event) %></td>
        <td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Event', new_event_path %>

<div id="calendar"></div>

turbolinks対策

<!DOCTYPE html>
<html>
  <head>
    <title>FiveMinFullcalendar</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body data-turbolinks="false">
    <%= yield %>
  </body>
</html>

試したこと

・別のVSCode内で上手く行かなかったので、この機能だけで実装してみた
・views/layouts/apprication.html.erbにjavaを読み込むscriptを記述する

補足情報（FW/ツールのバージョンなど）

Rails 6.0.0
ruby 2.6.5