Vueは友達
ホーム
>
Laravel
>
LaravelでFullCalendarを使ってDBの情報を表示する方法

LaravelでFullCalendarを使ってDBの情報を表示する方法

LaravelでFullCalendarを使ってDBの情報を表示する方法

14 回閲覧されました

みなさんこんにちは、jonioです。

FullCalendarを使ってカレンダーを表示する情報はネットにありますがDBの情報を表示する正確な記事がなかったのでメモとしてこの記事を残します。

おすすめ参考書

基礎力を上げるのに一番おすすめです。

FullCalendarのインストール

下記のコマンドを叩きます。

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

web.php

カレンダーを表示する為に下記の記述をします。

Route::get('/calendar', 'calendarShow')->name('calendar');

コントローラー

下記の記述をします。

public function calendarShow()
{
    return view('category-price.calendar');
}

テンプレート

下記の記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー</title>
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css" rel="stylesheet">
</head>
<body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
            });

            calendar.render();
        });
    </script>
</body>
</html>

これで下記の表示になります。

次はDBの情報を表示します。

今回はその日に使ったお金を表示するとします。

web.php

追記します。

Route::get('/calendar', 'calendarShow')->name('calendar');
        
Route::get('/calendar/events', 'calendarEvents')->name('calendar-events');      //この行を追加

コントローラー

追記します。

public function calendarShow()
{
    return view('category-price.calendar');
}


//ここから追記
public function calendarEvents(Request $request)
{
    $daily_total_prices = Price::where('user_id', Auth::id())->selectRaw('SUM(total_price) as total_price, DATE(created_at) as date')->groupBy('date')->get();

    $events = [];

    foreach ($daily_total_prices as $daily_total_price) {
        $events[] = [
            'title' => '¥' . number_format($daily_total_price->total_price),
            'start' => $daily_total_price->date,
            'backgroundColor' => '#FF0000',
        ];
    }

    return response()->json($events);
}
//ここまで追記

16行目〜18行目が大事です。

「title」・「start」・「backgroundColor」の意味は下記になります。

  • title : DBの中で表示したい値を記述します。今回は使ったお金の金額です。
  • start : 表示したい値に対応する日付を記述します。
  • backgroundColor : 表示したい値の背景色を付けます。背景色がいらない場合は記述しなくていいです。

15行目でカレンダーに反映させます。

テンプレート

追記します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー</title>
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css" rel="stylesheet">
</head>
<body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
                events: '/calendar/events'          //この行を追加
            });

            calendar.render();
        });
    </script>
</body>
</html>

「/calendar/events」はweb.phpで追記したURLと同じにします。

Route::get('/calendar/events', 'calendarEvents')->name('calendar-events');    //←の「/calendar/events」

これでカレンダーにDBの内容が反映されます。