【Laravel】FullCallendar :DBのデータをカレンダーで表示したい

実現したいこと

DBに保存されているデータをカレンダーに差し込みたい。

前提

FullCalendarを利用してカレンダーの実装を行っています。
DBに保存されているデータの一部を取り出して、カレンダーに表示したいのですが、うまく取すことができません。（画像参照）

前提
・todosテーブルからのデータを取り出す
※Todoアプリでカレンダーを実装しているためtodosテーブルとなっています

該当のソースコード

todos_table

php
1<?php
2
3use Illuminate\Database\Migrations\Migration;
4use Illuminate\Database\Schema\Blueprint;
5use Illuminate\Support\Facades\Schema;
6
7return new class extends Migration
8{
9
10    public function up()
11    {
12        Schema::create('todos', function (Blueprint $table) {
13            $table->id();
14            $table->integer('user_id')->unsigned();
15            $table->integer('category_id')->unsigned();
16            $table->string('title',30);
17            $table->date('due_date');
18            $table->boolean('status')->default(false);
19            $table->timestamp('updated_at')->useCurrent()->nullable();
20            $table->timestamp('created_at')->useCurrent()->nullable();
21        });
22    }
23
24    public function down()
25    {
26        Schema::dropIfExists('todos');
27    }
28};
29

web.php

php
1<?php
2
3use App\Http\Controllers\ProfileController;
4use Illuminate\Support\Facades\Route;
5
6use App\Http\Controllers\TodoController;
7
8
9Route::get('/calendar',[TodoController::class,'calendar'])->name('todos.calendar');
10Route::get('/get_events', [TodoController::class, 'getEvents']);
11
12require __DIR__.'/auth.php';
13

TodoController.php

php
1<?php
2namespace App\Http\Controllers;
3use Illuminate\Support\Facades\DB;
4
5use App\Models\Todo;
6use App\Models\User;
7
8class TodoController extends Controller
9{
10    public function calendar(Request $request)
11    {
12      return view('todos.calendar');
13    }
14      
15    public function getEvents(Request $request)
16    {
17      $schedule = Todos::where('user_id',\Auth::user()->id)->select('title', 'due_date as start','status as description')->get()->toArray();
18      echo json_encode($schedule);
19    }
20
21 
22}

calendar.blade.php

php
1
2@extends('layouts.app')
3@section('content')
4<div id="app" style="padding:100px;">
5  <div class="m-auto w-50 m-5 p-5" style="width:800px; height:300px; margin-left:300px">
6      <div id='calendar'></div>
7  </div>
8</div>
9
10 <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
11        
12  <script>
13    document.addEventListener('DOMContentLoaded', function() {
14    　var calendarEl = document.getElementById('calendar');
15      var calendar = new FullCalendar.Calendar(calendarEl, {
16      initialView: 'dayGridMonth',   
17      locale: 'ja',                 
18      firstDay: 1,　　　　　　　　　
19      headerToolbar: {
20        left: "dayGridMonth,listMonth",　　
21        center: "title",
22        right: "today prev,next"
23      },
24      
25       buttonText: {
26          today: '今月',
27          month: '月',
28          list: 'リスト'
29      },
30      
31      noEventsContent: 'スケジュールはありません',　
32                     
33      events: [
34        {
35          url: '/get_events',
36        },
37      ],
38                    
39      eventSourceFailure () { 
40        console.error('エラーが発生しました。');
41      },
42                    
43      eventMouseEnter (info) { 
44        $(info.el).popover({
45          title: info.event.title,
46          content: info.event.extendedProps.description,
47          trigger: 'hover',
48          placement: 'top',
49          container: 'body',
50          html: true
51        });
52      }
53    });
54                 
55    calendar.render();
56    });
57    
58  </script>
59@endsection