【laravel】DBから取得したレコードをFullcalendarのイベントとして反映したい

前提・実現したいこと

laravelで取得したDB(Mysql)の値を使って、fullcalendar(https://fullcalendar.io/)
のイベントを作りたいのですが、うまく作れていないので質問させて頂きます。

流れとしては、

1.schedule/indexにカレンダーを表示

2.カレンダーの日付をクリックするとschedule/createに遷移してform入力で登録。

3.登録ボタンを押すとschedule/indexに戻り、カレンダーにはイベントが反映されている。

という感じで考えております。
現状1,2の処理と、DBからレコードの値を持ってくるまではできています。
(ScheduleController参照)

イベントの表示ですが、画像のようにカレンダーのすべてのコマにイベントを挿入してしまっています。
これを解決したいです。

該当のソースコード

calendar.js

document.addEventListener('DOMContentLoaded', function() {
    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendarInteraction.Draggable

    /* initialize the external events
    -----------------------------------------------------------------*/

    var containerEl = document.getElementById('external-events-list');
    new Draggable(containerEl, {
      itemSelector: '.fc-event',
      eventData: function(eventEl) {
        return {
          title: eventEl.innerText.trim()
        }
      }
    });

    /* initialize the calendar
    -----------------------------------------------------------------*/

    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      locale:'ja',
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      drop: function(arg) {
        // is the "remove after drop" checkbox checked?
        if (document.getElementById('drop-remove').checked) {
          // if so, remove the element from the "Draggable Events" list
          arg.draggedEl.parentNode.removeChild(arg.draggedEl);
        }
      },
      events:'../json-events.json',
      selectable: true,
      select: function(info){
        document.location.href="/schedule/create";
      },

      eventClick: function(info) {
        //eventをドラッグした時の処理
      
      },
      eventDrop:function(info){
          //eventをドロップした時の処理
     
      }
    });
    calendar.render();

  });

ScheduleController

<?php

namespace App\Http\Controllers;
use App\Models\ScheduleForm;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;

class ScheduleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        // テーブルからデータを取得
        $data = DB::table('schedule_forms')->select('name as title', 'description','workday as start', 'start_time as startTime','end_time as endTime')
        ->get();
　　　　
　　　　 file_put_contents("json-events.json" , $data);

        return view('schedules.index',compact('data'));

    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('schedules.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $schedule = new ScheduleForm;

        $schedule->name = $request->input('name');
        $schedule->description = $request->input('description');
        $schedule->workday = $request->input('workday');
        $schedule->start_time =$request->input('start_time');
        $schedule->end_time = $request->input('end_time');
        $schedule->save();

        return redirect('schedule/index');

    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

json-events.json

[{"title":"test","description":null,"start":"2021-12-03","startTime":"13:07:00","endTime":"17:07:00"},{"title":"test","description":null,"start":"2021-12-03","startTime":"15:32:00","endTime":"16:32:00"}]

試したこと

json-events.jsonのstartキーで値が取れているので、その日付で挿入されるものと理解しているのですが
理解が違っていたでしょうか

https://fullcalendar.io/docs/event-object

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

fullcalendar4.3.1
laravel8

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

回答1件

ベストアンサー

ドキュメントを見ると、startとendしかありません。
なので、

json
1[
2    {
3        "title":"test",
4        "description":null,
5        "start":"2021-12-03 13:07:00",
6        "end":"2021-12-03 17:07:00"
7    },
8    {
9        "title":"test",
10        "description":null,
11        "start":"2021-12-03 15:32:00",
12        "end":"2021-12-03 16:32:00"
13    }
14]