Laravel8でFullcalendarとAJAXを使ってイベントを作成する

今週は、Laravel 8アプリにFullcalendar JavaScriptイベントカレンダープラグインを使用してイベントを作成・削除する方法を紹介します。

今回はプロジェクトのセットアップをスキップします。

プロジェクトの設定後、イベントの作成、削除を行うために、新しいカレンダーを作成する必要があります。そのために

php artisan make:controller FullCalenderController

そして、app\Http\Controllersの中の、FullCalenderController.phpで、FullcalendarイベントのビューとCDオペレーションを設定することになります。

public function index(Request $request)
    {
        if($request->ajax()) {  
            $data = Event::whereDate('start', '>=', $request->start)
                ->whereDate('end',   '<=', $request->end)
                ->get(['id', 'title', 'start', 'end']);
            return response()->json($data);
        }
        return view('welcome');
    }

この関数は、作成したイベントが表示されていることを取得します。

public function calendarEvents(Request $request)
    {
 
        switch ($request->type) {
           case 'create':
              $event = CrudEvents::create([
                  'event_name' => $request->event_name,
                  'event_start' => $request->event_start,
                  'event_end' => $request->event_end,
              ]);
 
              return response()->json($event);
             break;
  
  
           case 'delete':
              $event = CrudEvents::find($request->id)->delete();
  
              return response()->json($event);
             break;
             
           default:
             # ...
             break;
        }
    }

リクエストタイプはcreateで、create caseを入力すると、イベントが作成され、json形式で返されます。

リクエストタイプはdeleteで、delete caseを入力すると、作成されたイベントを削除して、json形式で返されます。

Controllerがセットアップされたので、次は routes/web.php ファイルに移動します。このファイルでは、ルートを作成するために FullCalenderControllerを使用する必要があります。

Route::get('calendar-event', [FullCalenderController::class, 'index']);
Route::post('calendar-crud-ajax', [FullCalenderController::class, 'calendarEvents']);

最後に、laravel bladeのビューファイルでフFull calenderを表示し、jQueryのAJAXリクエストでイベントの作成、削除を行う必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

カレンダーの日をクリックすると、入力タイプのフィールドが表示され、OKボタンをクリックすると、ajaxリクエストでコントローラに移動し、ajaxリクエストで戻り、イベントが作成されます。

また、作成したイベントをクリックすると、アラートボックスが表示され、OKボタンをクリックすると、作成したイベントが削除されます。

この状態に対して

$(document).ready(function () {

            var SITEURL = "{{ url('/') }}";

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var calendar = $('#full_calendar_events').fullCalendar({
                editable: true,
                editable: true,
                events: SITEURL + "/calendar-event",
                displayEventTime: true,
                eventRender: function (event, element, view) {
                    if (event.allDay === 'true') {
                        event.allDay = true;
                    } else {
                        event.allDay = false;
                    }
                },
                selectable: true,
                selectHelper: true,
                select: function (event_start, event_end, allDay) {
                    var event_name = prompt('Event Name:');
                    if (event_name) {
                        var event_start = $.fullCalendar.formatDate(event_start, "Y-MM-DD HH:mm:ss");
                        var event_end = $.fullCalendar.formatDate(event_end, "Y-MM-DD HH:mm:ss");
                        $.ajax({
                            url: SITEURL + "/calendar-crud-ajax",
                            data: {
                                event_name: event_name,
                                event_start: event_start,
                                event_end: event_end,
                                type: 'create'
                            },
                            type: "POST",
                            success: function (data) {
                                displayMessage("Event created.");

                                calendar.fullCalendar('renderEvent', {
                                    id: data.id,
                                    title: event_name,
                                    start: event_start,
                                    end: event_end,
                                    allDay: allDay
                                }, true);
                                calendar.fullCalendar('unselect');
                            }
                        });
                    }
                },
                
                eventClick: function (event) {
                    var eventDelete = confirm("Are you sure?");
                    if (eventDelete) {
                        $.ajax({
                            type: "POST",
                            url: SITEURL + '/calendar-crud-ajax',
                            data: {
                                id: event.id,
                                type: 'delete'
                            },
                            success: function (response) {
                                calendar.fullCalendar('removeEvents', event.id);
                                displayMessage("Event removed");
                            }
                        });
                    }
                }
            });
        });

        function displayMessage(message) {
            toastr.success(message, 'Event');            
        }

    </script>

開発サーバーの実行

php artisan serve

結果は上部に表示されます。

最後までお読みいただき、ありがとうございました。

By Ami