完整的日历事件处理（事件中的日期更改）

Question

因此，在我的代码中我添加了拖放功能。事件可能会被拖到另一个日期。不用动脑子，很容易实现。 但现在我想知道如何在日历中检查此更改，然后将更改保留在数据库中？

例如，这是我实现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,
    
    */

如您所见，它使用完整的日历，并具有一些处理任何用户交互的方法，例如单击某个日期、拖动事件周围以及更改日历的可视化（每周、每日和每月）。 调试它我发现任何类型的事件都是由方法“handleEvents()”处理的：

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

但我的问题是：我如何检查修改以便将更改（例如事件的日期修改）保留在数据库中？

我真的很难通过调试来理解它，但我从这里得到了任何东西。

Answer 1

当事件被拖动到不同位置时，将触发 eventDrop 事件。它提供的信息包括旧事件、新事件和其他有用的数据，您可以使用这些数据向后端提供信息。

这是一个简单的例子：

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();
  }
}

另请参阅事件拖动和调整大小文档一般情况