Laravelでfullcalendarを使用したいが、イベント情報がカレンダーに表示されない

前提・実現したいこと

Laravelでfullcalendarを使用し、イベントを入力するとカレンダーに表示されるように設定したいのですが、設定方法がわからずなかなかうまくいきません。
下記が現在のコードです。Ajaxを使用してデータ保存を試みているのですが、DBにデータは保存されるものの、カレンダーに表示がされない状態です。
どなたかご教授いただけると幸いです。

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

登録ボタンを押すと、/ajax/doneItemsに移動してしまい、下記の表示のみでカレンダーに表示されません。

{"done_id":null}

該当のソースコード

routes/web.php

PHP
1<?php
2
3use Illuminate\Support\Facades\Route;
4use Illuminate\Support\Facades\Auth;
5
6Route::get('/home', 'HomeController@index')->name('home');
7
8Route::get('/doneItems', 'DoneItemsController@postItem');
9Route::post('/ajax/doneItems', 'DoneItemsController@addItems');
10Route::post('/ajax/editDate', 'DoneItemsController@editDate');
11

app/Http/Controllers/DoneItemsController

PHP
1<?php
2
3namespace App\Http\Controllers;
4
5use Illuminate\Http\Request;
6use App\DoneItem;
7
8class DoneItemsController extends Controller
9{
10    public function postItems(Request $request)
11    {
12        $done_items = DoneItem::select('done_id', 'title', 'start')->get();
13
14        $newArr = [];
15        foreach($done_items as $done_item) {
16            $post_item["done_id"] = $done_item["done_id"];
17            $post_item["title"] = $done_item["title"];
18            $post_item["start"] = $done_item["start"];
19            $newArr = $post_item;
20
21            echo json_encode($newArr);
22        }
23    }
24
25    public function formatDate($date) {
26        return str_replace('T00:00:00+09:00', '', $date);
27    }
28
29    public function addItems(Request $request) {
30        $item = new DoneItem();
31        $item->start = $request->start;
32        $item->title = $request->title;
33        $item->save();
34
35        return response()->json(['done_id' => $item->done_id]);
36    }
37
38    public function editDate(Request $request) {
39        $data = $request->all();
40        $done_item = DoneItem::find($data['done_id']);
41        $done_item->date = $data['newDate'];
42        return null;
43    }
44}

migration

PHP
1<?php
2
3use Illuminate\Database\Migrations\Migration;
4use Illuminate\Database\Schema\Blueprint;
5use Illuminate\Support\Facades\Schema;
6
7class CreateDoneItemsTable extends Migration
8{
9    /**
10     * Run the migrations.
11     *
12     * @return void
13     */
14    public function up()
15    {
16        Schema::create('done_items', function (Blueprint $table) {
17            $table->bigIncrements('done_id');
18            $table->date('date');
19            $table->string('title')->nullable();
20            $table->timestamps();
21        });
22    }
23
24    public function down()
25    {
26        Schema::dropIfExists('done_items');
27    }
28}

resources/js/fullcalendar.js

js
1import { Calendar } from '@fullcalendar/core'
2import dayGridPlugin from '@fullcalendar/daygrid';
3import interactionPlugin from '@fullcalendar/interaction';
4
5document.addEventListener('DOMContentLoaded', function () {
6  var calendarEl = document.getElementById('calendar');
7
8  var calendar = new FullCalendar.Calendar(calendarEl, {
9    allDaySlot: false,
10    plugins: [dayGridPlugin, interactionPlugin],
11    initialView: 'dayGridMonth',
12    firstDay: 1,
13    events: "/doneItems",
14
15    eventDrop: function(info) {
16      editEventDate(info);
17    },
18    dateClick: function(info) {
19      addEvent(calendar, info);
20    },
21  });
22
23  calendar.render();
24});
25
26$.ajaxSetup({
27  headers: {
28      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
29  }
30});
31
32function addItems(calendar, info) {
33  var title = "jewelry";
34
35  $.ajax ({
36    url: '/ajax/addItems',
37    type: 'POST',
38    dataType: 'json',
39    data: {
40      "title": title,
41      "date": info.dateStr
42    }
43  }) .done(function(result) {
44    calendar.addItems({
45      id:result['done_id'],
46      title:title,
47      start: info.dateSter,
48    });
49  });
50}
51
52function editDate(info){
53  var done_id = info.event.id;
54  var date = formatDate(info.event.start);
55
56  $.ajax({
57      url: '/ajax/editDate',
58      type: 'POST',
59      data:{
60          "id":done_id,
61          "newDate":date
62          //ドロップしたあとの日付をphp側に渡す
63      }
64  })
65}
66
67function formatDate(date) {
68  var year = date.getFullYear();
69  var month = date.getMonth() + 1;
70    var day = date.getDate();
71    var newDate = year + '-' + month + '-' + day;
72    return newDate;
73}

resources/views/home.blade.php

PHP
1@extends('layouts.app')
2
3@section('content')
4<div class="container">
5    <div class="row justify-content-center">
6        <div class="col-md-8">
7            <div class="card">
8                <div class="card-header"></div>
9
10                <div class="card-body">
11                    @if (session('status'))
12                        <div class="alert alert-success" role="alert">
13                            {{ session('status') }}
14                        </div>
15                    @endif
16
17                    <div id="calendar"></div>
18
19                    <div class="done-list">
20                        <p>できたこと</p>
21                        {!! Form::open(['url' => '/ajax/doneItems', 'id' => 'done-items']) !!}
22                            {{ Form::token() }}
23                            <div class0="done-date">
24                                <label>{{ Form::date('start') }}</label>
25                            </div>
26                            <div class="post_item">
27                                <label>
28                                {{ Form::text('title',null, ['class' => 'title']) }}</label>
29                            </div>
30                            <div class="done-submit">
31                                {{ Form::submit('登録',['id' => 'done-btn']) }}
32                            </div>
33                        {!! Form::close() !!}
34                    </div>
35                </div>
36            </div>
37        </div>
38    </div>
39</div>
40@endsection

resources/views/layouts/app.blade.php

PHP
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <!-- CSRF Token -->
8    <meta name="csrf-token" content="{{ csrf_token() }}">
9
10    <title>{{ config('app.name', 'Laravel') }}</title>
11
12    <!-- Scripts -->
13    <script src="{{ asset('js/app.js') }}" defer></script>
14    <script src="{{ asset('js/fullcalendar.js') }}" defer></script>
15
16    <!-- Fonts -->
17    <link rel="dns-prefetch" href="//fonts.gstatic.com">
18    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
19
20    <!-- Styles -->
21    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
22</head>
23<body>
24    <div id="app">
25        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
26            <div class="container">
27                <a class="navbar-brand" href="{{ url('/') }}">
28                    {{ config('app.name', 'Laravel') }}
29                </a>
30                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
31                    <span class="navbar-toggler-icon"></span>
32                </button>
33
34                <div class="collapse navbar-collapse" id="navbarSupportedContent">
35                    <!-- Left Side Of Navbar -->
36                    <ul class="navbar-nav mr-auto">
37
38                    </ul>
39
40                    <!-- Right Side Of Navbar -->
41                    <ul class="navbar-nav ml-auto">
42                        <!-- Authentication Links -->
43                        @guest
44                            <li class="nav-item">
45                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
46                            </li>
47                            @if (Route::has('register'))
48                                <li class="nav-item">
49                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
50                                </li>
51                            @endif
52                        @else
53                            <li class="nav-item dropdown">
54                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
55                                    {{ Auth::user()->name }} <span class="caret"></span>
56                                </a>
57
58                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
59                                    <a class="dropdown-item" href="{{ route('logout') }}"
60                                       onclick="event.preventDefault();
61                                                     document.getElementById('logout-form').submit();">
62                                        {{ __('Logout') }}
63                                    </a>
64
65                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
66                                        @csrf
67                                    </form>
68                                </div>
69                            </li>
70                        @endguest
71                    </ul>
72                </div>
73            </div>
74        </nav>
75
76        <main class="py-4">
77            @yield('content')
78        </main>
79    </div>
80</body>
81</html>

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

Laravel 6.x
fullcalendar v5
PHP 7.4

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

回答1件

Ajaxならformタグなくても良いと思います。
非同期で、バックグラウンドにて実行させるものですし、ボタンもsubmitである必要はありません。
preventDefaultなどでsubmit（form送信）を止める必要があります。

いずれにしても、Javascript実行されて（Ajaxできてない）ないのでは。単なるform送信になってます。
#done-btn押下時に用意したJavascriptのfunctionを実行する処理も抜けてます。

投稿2021/01/05 00:15

編集2021/01/05 00:17

m.ts10806

総合スコア80875

退会済みユーザー

2021/01/05 06:41

ご回答ありがとうございます。アドバイスをもとに、formタグとsubmitをなくし、Javascriptには.on('click', function()を追加したのですが、やはりうまくいきません。（ボタンを押しても無反応)。実装が誤っているか、他にも問題点があるのでしょうか。 ```HTML <div class="done-list"> <p>できたこと</p> <div class0="done-date"> <label><input type="date" name="date"></label> </div> <div class="post_item"> <label><input type="text" name="title"></label> </div> <input type="button" id="done_btn" value="登録する"> </div> ``` fullcalendar.js ```JS $("#done-btn").on('click', function() { function addItems(calendar, info) { $.ajax ({ url: '/ajax/addItems', type: 'POST', dataType: 'json', data: { "title": title, "date": info.dateStr } }) .done(function(result) { calendar.addItems({ id:result['done_id'], title:title, start: info.dateSter, }); }); } }); ```