Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Danny971's avatar

How to Add and Save Events to FullCalendar with Start/End Time and Category Using AJAX in Laravel

Hello everyone,

I'm working on integrating FullCalendar into my Laravel application, and I need help with the following functionality:

Feature Overview:

Users can create events by selecting a time range on the calendar.

A modal pops up allowing users to input:

Event name Category (dropdown with predefined values like Red, Green, etc.) Start and End time (using datetime-local inputs). The data should be sent to the backend using AJAX to save the event in the database.

What I’ve Done So Far:

I've set up the FullCalendar with drag-and-drop and event-click functionality. In the modal, I validate the start and end times to ensure they're valid. I’ve written the AJAX function to send the event data to the backend. The Issue:

I'm having trouble saving the event into the database

Here’s the relevant part of my code:

The modal 

  <div class="modal fade none-border" id="event-modal">
                       <div class="modal-dialog">
                           <div class="modal-content">
                               <div class="modal-header">
                                   <h4 class="modal-title"><strong>Add New Event</strong></h4>
                               </div>
                               <div class="modal-body"></div>
                               <div class="modal-footer">
                                   <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                                   <button type="button" class="btn btn-success save-event waves-effect waves-light" >Create event</button>

                                   <button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
                               </div>
                           </div>
                       </div>
                   </div>

the Javascript

the route

Route::post('/save-calender-event-endpoint', [CalenderController::class, 'saveEvent']) -> name('save-calender-event-endpoint');

the db structure

the table name : calender

columns :

	1	event_id Primary	int(11)			
	2	event_name	varchar(100)	
	3	Start_time	datetime		
	4	End_time	datetime			
	5	Category	varchar(50)		
	6	event_postedby	varchar(255)

what am I doing wrong ?

0 likes
12 replies
Snapey's avatar

what am I doing wrong ?

pasting too much / irrelevant code, and not actually saying what is / is not happening

I assume you have done SOME debugging, not just clicked on the calendar and thought oh dear, not working, Ill ask on Laracasts

Danny971's avatar

@Snapey i gave all my code . what is not happening is that it not submitting the data to the db

Snapey's avatar

@Danny971 does it submit data to the server?

Is the right controller method reached?

Are there validation errors?

Does the controller error?

Are you missing required fields in the database and getting sql error?

What reply do you get to your ajax request?

Danny971's avatar

@Snapey I just place

rint_r("hellow from calander controller");

into the controller method and after running it I see not result so there for the controller method did not reach

Danny971's avatar

@jlrdw typo it was print_r

 print_r("hellow from calander controller");
Danny971's avatar

@Snapey just for testing purposes wanted to see if it was reaching the controller

print_r("hellow from calander controller");

supposed to print

hellow from calander controller

Snapey's avatar

@Danny971 but its an ajax request.... Nothing will be shown on the browser unless you put it there with javascript.

Try writing to the Log instead, then look there

Danny971's avatar

@Snapey I solved it . I can now save events to the database. my issue is how to I pull and gave the events being displayed on the calender

Danny971's avatar

@snapey @jlrdw i am now trying to have the events in the db to be reflected on the calendar. so if I logged out or refresh the page it would still be there unless I delete it

here is my approach

controller


public function showEvent()
{
    // Get events for the logged-in user
    $user = Auth::user();
    $events = CalendarEvent::where('user_id', $user->id)->get() ->toArray();

    \Log::info('Fetched events: ', $events->toArray());

    // Pass events to the view
    return response() -> json($events);
}

route

Route::get('/calendar-events', [CalendarController::class, 'showEvent'])->name('showEvent');

javascript

    $.ajax({
        url: '/calendar-events', // Route to fetch events
        method: 'GET',
        success: function(events) {

            console.log(events); 
            $('#calendar').fullCalendar({
                events: events, // Events returned from the server
                // other FullCalendar options
            });
        },
        error: function() {
            alert('Could not fetch events!');
        }
    });
    ///////////////////////

i only get could not fetch events

Snapey's avatar

If you still have a problem you have to explain what it is and what you have tried.

Please or to participate in this conversation.