Full calendar event handling (date changes in events)

So, in my code I have added the drag and drop fetaure. Events may be dragged to another date. No brainer, easy to accomplish. But now I wonder how can i check this change in the calendar and then persist the changes in the database?

For example, this is my calendar component who implements the fullcalendar:

import { Component,ChangeDetectorRef  } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular';
import { CalendarOptions, DateSelectArg, EventClickArg, EventApi } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import { CommonModule } from '@angular/common';
import interactionPlugin from '@fullcalendar/interaction';
import { IframeCalendarComponent } from '../../modal/iframe-calendar/iframe-calendar.component';
import { MatDialog } from '@angular/material/dialog'; //pop up page
import {MatButtonModule} from '@angular/material/button';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

@Component({
  selector: 'app-calendario',
  standalone: true,
  imports: [FullCalendarModule,CommonModule,MatButtonModule,IframeCalendarComponent,],
  templateUrl: './calendario.component.html',
  styleUrl: './calendario.component.css'
})
export class CalendarioComponent{
  calendarVisible = true;


  calendarOptions: CalendarOptions = {
    plugins: [
      interactionPlugin,
      dayGridPlugin,
      timeGridPlugin,
      listPlugin,
    ],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },

    initialView: 'dayGridMonth',
    weekends: false, 
    editable : true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    dateClick: () => this.handleDateClick(),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this),
    events: [
      { title: 'event 1', date: '2024-07-01' },
      { title: 'event 2', date: '2024-07-02' }
    ]
  };
  iframeSrc?: string;
  isIframeVisible: boolean = false;
  currentEvents: EventApi[] = [];

  constructor(public dialog: MatDialog, private changeDetector: ChangeDetectorRef) {}


  ngOnInit(): void {
    // Assuming your Angular app is running on localhost:4200
    //this.iframeSrc = 'http://localhost:4200/iframe';
  }


  handleWeekendsToggle() {
    this.calendarOptions = {
      ...this.calendarOptions,
      weekends: !this.calendarOptions.weekends
    };
  }

  handleCalendarToggle() {
    this.calendarVisible = !this.calendarVisible;
  }

  handleEventClick(clickInfo: EventClickArg) {
    if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
      clickInfo.event.remove();
    }
  }

  handleEvents(events: EventApi[]) {
    console.log('passou')
    this.currentEvents = events;
    this.changeDetector.detectChanges(); // workaround for pressionChangedAfterItHasBeenCheckedError
  }

  openPopup(): void {
    console.log("apertou")
    this.dialog.open(IframeCalendarComponent, {
      width: '1000px',
      height: '800px',
      enterAnimationDuration:'800ms'
    })
  }

  handleDateClick() {
    console.log('date click! ')
  }

}


/*


    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    
    */

As you can see, it uses the full calendar and has some methods that suppose to handle any user interaction such as clicking at some date, dragging events arround and changing the calendar's visualization (weekly, daily, and monthly). Debbuging it I have seen that any sort of event is handled by the method "handleEvents()" :

  handleEvents(events: EventApi[]) {
    console.log('passou')
    this.currentEvents = events;
    this.changeDetector.detectChanges(); // workaround for pressionChangedAfterItHasBeenCheckedError
  }

but my question is: How can i check the modification in order to persist the changes (e.g date modification of an event) at the database?

I'm trying really hard to understand by debugging it, but I'm getting anywhere from here.

The eventDrop event will fire when an event has been dragged to a different location. It provides info including the old event, the new event and other useful data, which you can use to give information to your backend.

Here's a simple example:

eventDrop: function(info) {
  console.log(info.event.title + " was dropped on " + info.event.start.toISOString());

  if (!confirm("Are you sure about this change?")) {
    info.revert();
  }
}

See also the event dragging and resizing documentation in general