質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1400閲覧

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

hanasaki

総合スコア3

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1グッド

0クリップ

投稿2023/03/21 12:38

実現したいこと

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

試したこと

getEventsメソッドを作成し、取り出したデータをjson形式にして出力するようにしたつもりなのですが、データが表示されません。
記述が間違っているとすればコントローラのgetEventsメソッドの部分だと思うのですがどのように記述すれば良いのか分からない為ご教授頂ければと思います。

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

Laravel9
FullCalendar: v6.14
https://fullcalendar.io/docs/initialize-globals

参考URL
https://juno-engineer.com/article/laravel-fullcalendar/
https://morioh.com/p/9ec9fc3faef0

phper.kを押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phper.k

2023/03/21 13:39

ブラウザのデバッグツールで通信の状態や、レスポンスの確認はしてますか?
hanasaki

2023/03/21 13:54

ご指摘ありがとうございます。 確認しておりませんでしたので、デベロッパツールで確認を行いましたがエラーなどは特に出ていないようでした。
phper.k

2023/03/21 13:59

デベロッパーツールの一体どこを見て? ネットワークからレスポンス見るとSQLのエラー出ていてもおかしくないんですけど。 提示されたソース見る限り。
hanasaki

2023/03/21 14:10

Consoleの部分を見て確認したのですが、違っていますでしょうか? 理解不足で申し訳ありません!
phper.k

2023/03/21 14:14

コンソールだけがツールの機能じゃないんだし、他のタブ見てご覧なさい。 必要のない機能ならそもそもついてないはずです。
hanasaki

2023/03/21 14:37

ご指摘頂いたようにコンソール以外のタブも確認してみたのですが、エラーを見つけられませんでした... 調べてみたのですが、エラーをコンソールで確認している記事が多く分かりませんでした、、 Laravel専用のデバックツールがあるのですね。存じませんでした。 有難うございます!インストールしてみます。
hanasaki

2023/03/23 07:52

phper.k様 回答欄に記述させていただきましたが、JSON形式でなく、配列として返したところうまくいきました。 アドバイス等有難うございました。
guest

回答1

0

自己解決

コントローラのgetEventsの部分の記述ですが、JSON形式ではなく、配列としてそのまま返したところうまくいきました。変更前の記述は配列にする際の記述にもミスがありました。(TodosではなくTodoが正しいです)

(変更前)
$schedule = Todos::where('user_id',\Auth::user()->id)->select('title', 'due_date as start','status as description')->get()->toArray();

echo json_encode($schedule);

(変更後)
$schedule = Todo::where('user_id',\Auth::user()->id)->select('title', 'due_date as start','status as description')->get()->toArray();

return $schedule;

投稿2023/03/23 07:50

hanasaki

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問