Edit Events in FullCalendar in Laravel application

Add another modal (Edit Modal) inside the mycalendar.blade.php. This modal will be use display and edit an Event.

<div class="modal fade" id="eventEdit" role="dialog" data-dismiss="modal" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content bg-light ">
                <div class="modal-header bg-gray">
                    <div class="card-title">Edit Event</div>
                </div>
                <form id="editEventSubmit" type="post" target="#">
                    {{ csrf_field() }}
                    <div class="card-body text-black p-4">
                        <div class="row mb-3 ">
                            <div class="col-md-1">
                                Start:
                            </div>
                            <div class="col-md-5">
                                <div id="startdate"></div>
                            </div>
                            <div class="col-md-1">
                                End:
                            </div>
                            <div class="col-md-5">
                                <div id="enddate"></div>
                            </div>
                        </div>
                        <div class="row mb-3 pl-4 pr-4">
                            <div class="col-md-12">
                                <label for="edittitle">Title</label>
                                <input id="eventid" type="hidden" name="eventid">
                                <input id="edittitle" type="text" name="edittitle" class="form-control" autofocus>
                            </div>
                        </div>
                        <div class="row mb-3 ">
                            <div class="col-md-12">
                                <table class="table table-bordered">
                                    <tr>
                                        <td>New Date Range
                                            <input type="text" name="rangepick2" class="form-control daterange" /></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="editeventsubmit" class="btn btn-sm btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
            
                

Add another instance of DateRangePicker for the Edit Modal

 <script type="text/javascript">
        $(function() {
            $('input[name="rangepick2"]').daterangepicker({
                timePicker: true,
                startDate: moment().startOf('hour'),
                endDate: moment().startOf('hour').add(32, 'hour'),
                locale: {
                    format: 'YYYY-MM-DD HH:mm'
                }
            });
        });
    </script>

Add a Javascript to get the input field data when submitting the form

  <script>
        $(document).ready(function(){
            $(document).on('submit','#addEventSubmit',function(){
                $.ajax({
                    method: 'post',
                    url: '{{route('mycalendar.addevent')}}',
                    data: $('#addEventSubmit').serialize(),
                    success: function(response) {
                    },
                });
            });
        });
    </script>

Update FullCalendar script to display the edit modal when clicking the event in the calendar. The script also includes submitting the updated event and when the submit button is clicked.

eventClick: function(events, jsEvent, view) {
                    $('#eventid').val(events.event.id);
                    $('#edittitle').val(events.event.title);
                    startdt = new Date(events.event.start);
                    startdate = moment(startdt).format('MMM DD YYYY h:mm A');
                    const startDiv = document.getElementById('startdate');
                    startDiv.textContent = startdate;
                    enddt = new Date(events.event.end);
                    enddate = moment(enddt).format('MMM DD YYYY h:mm A');
                    const endDiv = document.getElementById('enddate');
                    endDiv.textContent = enddate;
                    $('#eventEdit').modal('show');
                    $(document).on('click','#editeventsubmit',function(){
                        console.log('test');
                        $.ajax({
                            method: 'post',
                            url: '{{route('mycalendar.editevent')}}',
                            data: $('#editEventSubmit').serialize(),
                            success: function(response) {
                                $('#eventEdit').modal('hide');
                                calendar.refetchEvents();
                            },

                        });
                    });
                }

Create Route for the edit event

Route::post('/calendar/mycalendar/editevent', [EventController::class, 'updateevent'])->name('mycalendar.editevent');

Create an updateevent function in your EventsController

public function updateevent(Request $request)
    {
        $title = $request->input("edittitle");
        $eventid = $request->input("eventid");
        $range2 = $request->input("rangepick2");
        $dates = explode(' - ', $range2);
        $start_datetime = Carbon::parse($dates[0]);
        $end_datetime = Carbon::parse($dates[1]);
        $event = Event::where('id','=',$eventid)->first();
        $event->title = $title;
        $event->start = $start_datetime;
        $event->end = $end_datetime;
        $event->save();
        return response()->json([
            'success' => true,
            'data' => $event
        ]);
    }