keisuke19890521
@keisuke19890521

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Laravelにfullcalendarを実装したいが困っています

解決したいこと

Laravelにてfullcalendarを導入し、
データベースに保存済のデータを反映、表示させたいです。
デベロッパーツールで確認するとデータは渡せているようなのですが
カレンダーへの反映、表示がされていない状態です。

Laravelとfullcalendarのバージョンは以下の通りです。

 ・Laravel Framework 9.52.1
 ・fullcalendar ^6.1.4(npmでインストール済)

現在の関連ファイルは以下の通りで記述しております。

デベロッパーツールの画面
キャプチャ.JPG

マイグレーション

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('managements', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('pet_id');
            $table->string('record');
            $table->datetime('start_register');
            $table->datetime('end_register');
            $table->string('content');
            $table->integer('weight');
            $table->string('image');
            $table->timestamps();
            
            $table->foreign('pet_id')->references('id')->on('pets');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('managements');
    }
};

コントローラー

    public function scheduleGet(Request $request)
    {
        // バリデーション
        $request->validate([
            'start_register' => 'required',
            'end_register' => 'required'
        ]);

        // カレンダー表示期間
        $start_register = date('Y-m-d', intval($request->input('start_register')) / 1000);
        $end_register = date('Y-m-d', intval($request->input('end_register')) / 1000);

        // 登録処理
        return Management::query()
            ->select(
                // FullCalendarの形式に合わせる
                'start_register as start',
                'end_register as end',
                'record as title'
            )
            // FullCalendarの表示範囲のみ表示
            ->where('end_register', '>', $start_register)
            ->where('start_register', '<', $end_register)
            ->get();
    }

ルーティング

    Route::post('/schedule-get', [ManagementsController::class, 'scheduleGet'])->name('schedule-get');

JavaScript

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import axios from 'axios';


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

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,listWeek",
    },
    // 日本語表記
    locale: "ja",
    
/*  修正中

    dateclick: function(info) {
        window.location.href ="{{ route('managements.create') }}" + info.dateStr;
    }, */

    events: function (info, successCallback, failureCallback) {
        // managentsデータの取得
        axios
            .post("/schedule-get", {
                start_register: info.start.valueOf(),
                end_register: info.end.valueOf(),
            })
            .then((response) => {
                // 追加したイベントを削除
                calendar.removeAllEvents();
                // カレンダーに読み込み
                successCallback(response.date);
            })
            .catch(() => {
                // バリデーションエラーなど
                alert(("登録に失敗しました"))
            });
    },
});
calendar.render();

どなたか教えていただけると幸いです。
宜しくお願いいたします。

0

1Answer

APIに接続せずに、単純な形でデータの反映は試してみましたか?

    events: function (info, successCallback, failureCallback) {
        const data = /* 任意のデータ */;
        successCallback(date);
    },

response.dateの状態は確認してみましたか?

0Like

Comments

  1. ご回答いただき、ありがとうございます。自己解決できました。ありがとうございます。

Your answer might help someone💌