rails fullcalendarで登録した予定を表示できるようにしたい

Question

前提・実現したいこと

rails初心者で初投稿です。うまく問題を言語化できているかわかりませんがよろしくお願いいたします。
railsでfullcalendarを使って予定表アプリを作りたいと思っています。

railsでfullcalendarを使い予定を追加してカレンダー上で表示させたいのですが、追加した予定がカレンダーに表示されません。
㏈を見る限り予定の追加はうまくいっているようです。
カレンダーの表示はindexアクションで行っています。

routes

Rails.application.routes.draw do
  resources :tasks
  root 'tasks#index'
end

controller

def index
   @tasks = Task.all
end

index.html.erb

<div id='calendar'></div>
  <%= javascript_pack_tag 'calendar/calendar' %>

  <div id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>
</div>  

<div id="response-modal" tabindex="0" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="error" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="response-modal-body">
        </div>
      </div>
    </div>
</div>

</div>
<!-- .container -->

JS

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import googleCalendarApi from '@fullcalendar/google-calendar'

//<div id='calendar'></div>のidからオブジェクトを定義してカレンダーを作っていきます。
document.addEventListener('DOMContentLoaded', function() {

    

    var calendarEl = document.getElementById('calendar');

    //カレンダーの中身を設定(月表示とか、クリックアクション起こしたいとか、googleCalendar使うととか)
    var calendar = new Calendar(calendarEl, {
        plugins: [ dayGridPlugin, interactionPlugin, googleCalendarApi ],


        //細かな表示設定
        locale: 'ja',
        timeZone: 'Asia/Tokyo',
        firstDay: 1,
        headerToolbar: {
          start: '',
          center: 'title',
          end: 'today prev,next' 
        },
        expandRows: true,
        stickyHeaderDates: true,
        buttonText: {
           today: '今日'
        }, 
        allDayText: '終日',
        height: "auto",

        dateClick: function(info){
            //日付をクリックしたときのイベント
            //クリックした日付の情報を取得
            const year  = info.date.getFullYear();
            const month = (info.date.getMonth() + 1);
            const day   = info.date.getDate();
        
            //ajaxでtasks/newを着火させ、htmlを受け取ります
            $.ajax({
                type: 'GET',
                url:  '/tasks/new',
            }).done(function (res) {
                // 成功処理
                // 受け取ったhtmlをさっき追加したmodalのbodyの中に挿入します
                $('.modal-body').html(res);

                //フォームの年、月、日を自動入力
                $('#task_start_1i').val(year);
                $('#task_start_2i').val(month);
                $('#task_start_3i').val(day);

                $('#task_end_1i').val(year);
                $('#task_end_2i').val(month);
                $('#task_end_3i').val(day);

                //ここのidはtasks/newのurlにアクセスするとhtmlがコードとして表示されるので、
                //開始時間と終了時間のフォームを表しているところのidを確認してもらうことが確実です

                $('#modal').fadeIn();

            }).fail(function (result) {
                // 失敗処理
                alert("failed");
            });
        },

        events: '/tasks.json',

    });
    //カレンダー表示
    calendar.render();

    //成功、失敗modalを閉じたときに予定を再更新してくれます
    //これがないと追加しても自動更新されません
    $(".error").click(function(){
        calendar.refetchEvents();
    });

});

index.json.jbuilder

json.array! @tasks do |task|
  json.title task.title
  json.start task.start
  json.end task.end
  json.url task_url(task, format: :html)
end

試したこと

カレンダー自体は表示されますし、モデルを見た感じタスクの登録自体もうまくいっています。
JSのevents:の後にデータをjson形式で直書きした場合は予定表示ができました。

ターミナルやchromeの開発者ツールを見ても特にエラーは吐かれておらず、どこに手をつけたらうまくいくのかがわからない状態です。

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

rails: 6.0.3
fullcalendar 5.6.0