Add Events and Display in Full Calendar

Add a modal inside the mycalendar.blade.php. The modal will be use for user to Add an Event

<div class="modal fade" id="eventAdd" 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">Add Event</div>
                </div>
                <form id="addEventSubmit" type="post" target="#">
                    {{ csrf_field() }}
                <div class="card-body text-black p-4">
                    <div class="row mb-3 pl-4 pr-4">
                        <div class="col-md-12">
                            <label for="title" >Title</label>
                            <input id="title" type="text" name="title" class="form-control" autofocus>
                        </div>
                    </div>
                    <div class="row mb-3 ">
                        <div class="col-md-12">
                            <table class="table table-bordered">
                                <tr>
                                    <td>Date Range
                                  <input type="text" name="rangepick" class="form-control daterange" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                    <div class="modal-footer">
                        <button type="submit" id="addvent" class="btn btn-sm btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Add Button to activate the modal

<a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#eventAdd">Add Event</a>

Add Javascript code to enable Bootstrap DateRangePicker

<script type="text/javascript">
        $(function() {
            $('input[name="rangepick"]').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>

Add Route for addevent

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

Create addevent() function inside EventController to store the event in your Database

 public function addevent(Request $request)
    {
        $title = $request->input("title");
        $range = $request->input("rangepick");
        $dates = explode(' - ', $range);
        $start_datetime = Carbon::parse($dates[0]);
        $end_datetime = Carbon::parse($dates[1]);

        $event = new Event();
        $event->title = $title;
        $event->start = $start_datetime;
        $event->end = $end_datetime;
        $event->save();
        return response()->json([
            'success' => true,
            'data' => $event
        ]);
    }

Add Route to get the events

Route::get('getevents', [EventController::class, 'getevents'])->name('getevents');

Create getevents() function inside EventController to display the Events in your calendar

 public function getevents(Request $request){
            $events = Event::whereDate('start', '>=', $request->start)
                ->whereDate('end', '<=', $request->end)
                ->get();

            return response()->json($events);
        }

Update your FullCalendar script to display the events in the calendar

   <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                editable: true,
                displayEventTime:true,
                displayEventEnd:true,
                events:'{{route('getevents')}}'
            });
            calendar.render();
        });
    </script>