Fullcalendar - save events in database

Question

I have the following markup:

I have a instance of fullcalendar. When clicking on a day (triggering the dayClick-callback), a bootstrap modal is opened, where the user can enter a title, and the start/end date. Once clicking on ok, those values provided, will be added to the calendar. Here's the code for that:

 function addTitle(){ //having a button onClick="addTitle()"
            var title = $('#add_date_title').val();
            var startdate = $('#add_date_startdate').val();
            var enddate = $('#add_date_enddate').val();
            var end_split = enddate.split('-');
            end_split[2]= parseInt(end_split[2])+parseInt("1");
            enddate = end_split[0] + "-" + end_split[1] + "-" + end_split[2];
            $('#add_date_title').val('');
            $('#add_date_startdate').val('');
            $('#add_date_enddate').val('');
            $('#add_date_modal').modal('hide');

            var myCalendar = $('#calendar');
            var myEvent = {
                title:title,
                allDay: true,
                start: startdate,
                end: enddate
            };
            myCalendar.fullCalendar( 'renderEvent', myEvent );
        }

So the event is now in the calendar. But when e.g. switching the month, or reloading the page, all data is lost, of course, because it's saved nowhere.

Now the question is: How could I save the event directly into the database, and then load it, so where can I bring in php code, to save the event to a db... The problem, why I'm asking, is that the site in between adding events is never reloaded, so I'm not able, to check for GET or POST-Parameters or something similiar... Could I maybe do this with AJAX? If yes, how? Because I'm not really familiar with AJAX.

Answer 1

You can actually save the events in DB.

1. Use this ajax after your modal trigger.

2. Get the values like title,startdate, end date in modal and send them in the following ajax

   $.ajax({
     url: 'add_events.php',
     data: 'title='+ title+'&start='+ start2 +'&end='+ end2,                                                    
     type: "POST",
     success: function(json) {
       $( "#getReason" ).modal('hide');
       $('#mydiv').hide();
       $('body').removeClass('blockMask');//calendar.fullCalendar( 'refetchEvents');
       $('#calendar').fullCalendar('refetchEvents');
     }
   });
   

3. in add_events.php save the details in db

4. In your main page use this method for dynamically creating event source

   function eventSourceCall(){
        eventSourceCall = [
           {
               url: 'events.php?status=absent',
               backgroundColor: 'red',
               borderColor: 'white',
               textColor: 'white',
               rendering: 'background',
               cache: false
           }
   

5. in events.php perform a select operation and retrieve the event parameters as json encoded objects and return them.

6. In calendar function eventSources: eventSourceCall, add this line for selecting the event source.