LaravelでFullcalendarを実装する方法

はじめに

今回はLaravelでFullcalendarを実装する方法について解説します。
LaravelでFullcalendarを実装するにあたり、参考記事があまりなく、実装に苦労したので、同じような方の助けになればと思います。

-各バージョン
-Laravel 6.x
-PHP 7.4.9
-MySQL 5.7.30
-Fullcalendar v5

Fullcalendarをダウンロードする

公式ドキュメントよりダウンロードできます。
https://fullcalendar.io/docs/getting-started

NPMやCDNを利用する方法がありますが、ダウンロード方法はお好きな方法で問題ないです。
今回はzipファイルをダウンロードする方法し、以下のように追加しました。

event.blade.php

<link href='fullcalendar/main.css' rel='stylesheet'>
<script src='fullcalendar/main.js'></script>

モデルとデーブルを作成する

わたしの場合はModelsファイルの中にモデルを格納したいので、以下のように書いています。必要がなければ、Modelsのところはカットして問題ないです。

php artisan make:model Models/Event -m

まずはテーブルから書いていきます。
Fullcalendarには様々なプロパティが用意されていて、以下のサイトより確認することができます。
https://fullcalendar.io/docs/event-parsing
今回はシンプルに、予定のタイトルと登録する日付、文字の色を変更できるように設定していきます。

events.table.php

public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title', 100);
            $table->date('start');
            $table->string('textColor');
            $table->timestamps();
        });
    }

マイグレーションします。

php artisan migrate

カレンダーに登録したデータを表示する

カレンダーの表示とカレンダーに登録したデータを表示するControllerとルーティングを書いていきます。

php artisan make:controller EventController

indexアクションにカレンダーの表示とDBに保存されているデータをカレンダーに表示させるコードを書きます。
今回はDBファサードを利用するので、useで宣言が必要です。

EventController.php

use App\Models\Event;

public function index(Request $request) {

  if ($request->ajax()) {
    $data = DB::table('events')->select('title', 'start', 'textColor')->get();
    return response()->json($data);
    }

return view('/event');
}

$request->ajax()でデータがajax通信かどうかを確認できるメソッドです。
if内では、eventsテーブルからデータを持ってきて、response()->json()を利用し、json形式で保存するようにしています。
このようにすることによって、PHPで保存したデータをJavaScriptで利用できるようになります。

続いて、ルーティングは以下のように設定します。

web.php

Route::get('/index', EventController@index);

カレンダーの情報を登録する

カレンダーの情報を登録するためのコードを先ほど作成したEventControllerに書いていきます。データの登録後、カレンダーが表示されているページに戻るようにしています。

EventController.php

public function store(Request $request)
    {
        $event = new Event;

        $event->title = $request->input('title');
        $event->start = $request->input('start');
        $event->textColor = $request->input('textColor');
        $task->save();

        return redirect('/event');
    }

続いてルーティングです。

web.php

Route::post('/store', EventController@store);

カレンダーの表示と登録フォームを設定する

カレンダーの表示自体はとても簡単で、カレンダーを表示させたい場所に以下のコードを書くだけで表示できます。

event.blade.php

<div id="calendar"></div>

フォームはCSSを考慮せずに書いているのでご了承ください。

event.blade.php

<form method="POST" action="{{ route('/store') }}">
   @csrf
  <input type="text" name="title">
  <input type="date" name="start">
  <input type="color" name="textColor">
  <button type="submit">登録</button>
</form>

データの登録なので、methodはPOSTを指定し、actionにはフォームが送信されたらEvercontrollerのstoreアクションにつながるようにしたいので、先ほどweb.phpで指定したroute('store')を指定しています。

type属性にはそれぞれ入力方式に適したものを入力し、name属性にはeventsテーブルで指定したカラム名を入力します。

続いてはJSを書いていきます。
今回はevent.blade.phpに直接書きましたが、便宜JSだけディレクトリを分けてもいいかと思います。

event.blade.php

<script>
  $(document).ready(function () {
    $('#calendar').fullCalendar({
      // はじめりの曜日を月曜日に変更　デフォルトは日曜日になっており、日=0,月=１になる
      firstDay: 1,
      headerToolbar: {
                     right: 'prev,next'
                     },
      events: '/index',
    });
  });
</script>

eventsにはカレンダーに保存している情報を表示するアクションが書かれている、EventControllerのindexメソッドにつながるように書く必要があります。
そのため、先ほどweb.phpで指定した/homeを指定しています。

今回はシンプルなカレンダーになっていますが、Fullcalendarには様々なオプションが用意されています。
簡単なものだと、headerToolbarはrightだけではなく、left,centerのカスタマイズもできますし、eventをドラッグしたり、日にちを選択して登録することなんかもできます。
詳しいオプションに関しては、Fullcalendarの公式マニュアルをご確認ください。
https://fullcalendar.io/docs#toc

これで、カレンダーにデータの登録と、登録したデータの表示ができるようになりました！

さいごに

今回は登録フォームを直接書いていますが、今後は日付から選択をしてデータの登録をしたりなど、いろいろとカスタマイズをしてみたいと思います！

最後まで読んでいただきありがとうございました！