はじめに
今回は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ファイルをダウンロードする方法し、以下のように追加しました。
<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
今回はシンプルに、予定のタイトルと登録する日付、文字の色を変更できるように設定していきます。
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で宣言が必要です。
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で利用できるようになります。
続いて、ルーティングは以下のように設定します。
Route::get('/index', EventController@index);
カレンダーの情報を登録する
カレンダーの情報を登録するためのコードを先ほど作成したEventControllerに書いていきます。データの登録後、カレンダーが表示されているページに戻るようにしています。
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');
}
続いてルーティングです。
Route::post('/store', EventController@store);
カレンダーの表示と登録フォームを設定する
カレンダーの表示自体はとても簡単で、カレンダーを表示させたい場所に以下のコードを書くだけで表示できます。
<div id="calendar"></div>
フォームはCSSを考慮せずに書いているのでご了承ください。
<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だけディレクトリを分けてもいいかと思います。
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
// はじめりの曜日を月曜日に変更 デフォルトは日曜日になっており、日=0,月=1になる
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
これで、カレンダーにデータの登録と、登録したデータの表示ができるようになりました!
さいごに
今回は登録フォームを直接書いていますが、今後は日付から選択をしてデータの登録をしたりなど、いろいろとカスタマイズをしてみたいと思います!
最後まで読んでいただきありがとうございました!