Issue Creating Google Calender Event with spatie/laravel-google-calendar

Question:

I’m trying to create an event using Laravel and Ajax, but I’m encountering an issue where nothing happens when I change the start and end dates. I’ve provided my code below for reference.

Description:

I have a Laravel controller with a store method that handles the creation of an event. When I change the start and end dates in the form, I want to use Ajax to send the data to the server and create the event. However, it’s not working as expected, and I need help identifying what’s going wrong.

web.php(Route)

Route::resource('event',EventController::class);

EventController

 public function store(Request $request)
    {
     
        if ($request->isMethod('post')) {
            $event = $this->createEventInstance($request);
            
            // Perform other actions if needed
            
            return;
        }

    }
      
    private function createEventInstance(Request $request)
{
    $startTime = Carbon::parse($request->input('effective_period_start_date'));
    $endTime = Carbon::parse($request->input('effective_period_end_date'));

    return new Event([
        'startDateTime' => $startTime,
        'endDateTime' => $endTime
    ]);
}

Blade code

 <div class="col-sm-4">
    <div class="mb-3">
      <label class="form-label">Effective Period Start date</label>
      <input type="date" class="form-control effective_period_start_date" name="effective_period_start_date" value="{{@$obj->effective_period_start_date}}" {{ $disabledfield }}>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="mb-3">
      <label class="form-label">Effective Period End date</label>
      <input type="date" class="form-control effective_period_end_date" name="effective_period_end_date" value="{{@$obj->effective_period_end_date }}" {{ $disabledfield }}>
    </div>
  </div>


var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var url = '/event';
    $(document).ready(function() {
    $('.effective_period_start_date, .effective_period_end_date').on('change', function() {
        var startDate = $('.effective_period_start_date').val();
        var endDate = $('.effective_period_end_date').val();

        if (startDate && endDate) {
            // Prepare the data to send to the server
            // var data = {// Include CSRF token
                
            //     "effective_period_start_date": startDate,
            //     "effective_period_end_date": endDate
            // };
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    effective_period_start_date: startDate,
                    effective_period_end_date: endDate
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }, // Send data in the request body
                success: function(response) {
                    console.log('Event created:', response);
                    // You can handle the success response here
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    // You can handle errors here
                }
            });
        }
    });
});

Issue Details:

1. I’m using the store method in my controller to create an event.

2. I have a private method createEventInstance to prepare the event data.

3. I’m using Js and Ajax to send the data to the server when the start and end dates change.

Expected Behavior:

I expect the event to be created and the success response to be handled.

Actual Behavior:

The event is not being created, and I’m not receiving any success response.

Questions:

• Can you please help me identify what might be causing this issue?

• Is there anything wrong with my Ajax request or controller logic?

• Are there any specific Laravel routes or configurations I need to check?