AJAX data not posting using FullCalendar when trying to update

I have a calendar.php file which looks up “php/get-events” to display calendar events from the database (This currently works as expected). I am trying to use “php/calendarupdate” to then update the database with the new start/end times that have been dragged, but the data posting to this page always comes back as undefined, so it’s not finding it for some reason.

"Calendar.php"

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      initialDate: '2021-03-18',
      editable: true,
      
    eventDrop: function(event, delta) {
   start=moment(event.start).format('Y-MM-DD HH:mm:ss');
   end=moment(event.end).format('Y-MM-DD HH:mm:ss');
   $.ajax({
   url: 'php/calendarupdate.php',
   data: 'title=' + event.title + '&start='+ event.start +'&end=' + event.end + '&id=' + event.id ,
   type: "POST",
   success: function(json) {   
    alert("Updated Successfully");
   }
   });
   },
      navLinks: true, // can click day/week names to navigate views
      dayMaxEvents: true, // allow "more" link when too many events
      events: {
        url: '/php/get-events.php',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block'
        }
      },
      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      }
    });
    calendar.render();
  });
</script>

The following is where I get the data which successfully displays events on the calendar.

"php/get-events.php"

$stmt = $pdo->prepare("Select id,task_name,start,end,notes,task_type,status from tasks where attendees like ".$attendees);
$stmt->execute();
//$stmt->debugDumpParams();
foreach ($stmt as $row){
    $rawdata[] = array('id' => $row['id'], 'title'=> $row['task_name'], 'start'=> $row['start'], 'end'=> $row['end']);
}
$rawdata = json_encode($rawdata);
echo $rawdata;

The following is the update file, which it is getting into ok, but the echo’s I try to display are all undefined.

/* Values received via ajax */
echo "id -".$_POST['id'];
echo "start -".$_POST['start'];
echo "end -".$_POST['end'];

// update the records
$stmt = $pdo->prepare('UPDATE tasks SET start=?, end=? WHERE id=?');
$stmt->execute($_POST['start'], $_POST['end'], $_POST['id']);
$stmt->debugDumpParams();

It may be something simple, but from the documentation I’ve read, I can’t seem to figure out why my variables are not posting successfully. Thanks.

Answer

You have the wrong syntax for your eventDrop signature. See https://fullcalendar.io/docs/eventDrop

It should be

eventDrop: function(info) {

And then replace

event.start

and

event.end

with

info.event.start

and

info.event.end

This will get the information you need correctly from the data which fullCalendar supplies.

Advertisement

Answer