全日历角度不显示来自服务器的事件

Question

我设法在Web控制台上获取事件（在测试中添加到静态json文件中），静态实现的事件显示在日历中，但来自服务器的事件没有显示，添加事件时添加事件有效它们保存在数据库中，因此我没有包含任何工作服务

export class AppComponent implements OnInit, AfterViewInit {

  @ViewChild('fullcalendar', { static: true }) fullcalendar!: ElementRef;

  ngOnInit() {
    console.log('AppComponent initialized');
  }

  ngAfterViewInit() {
    console.log('AppComponent view initialized');
    const fullCalendarElement = this.fullcalendar?.nativeElement;

    if (fullCalendarElement && fullCalendarElement.fullCalendar) {
      const calendarApi = new FullCalendar.Calendar(fullCalendarElement, {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        // ... other options
      });

      calendarApi.render();

      if (calendarApi) {
        console.log('Calendar API:', calendarApi);
      } else {
        console.error('FullCalendar API is undefined');
      }
    } else {
      console.error('FullCalendar ElementRef or fullCalendar property is undefined');
    }
  }

  calendarVisible = true;
  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',
    initialEvents: INITIAL_EVENTS,
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.loadEventsFromBackend.bind(this)
  };
  currentEvents: EventApi[] = [];

  constructor(private changeDetector: ChangeDetectorRef, private http: HttpClient) {}

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

  handleWeekendsToggle() {
    this.calendarOptions = {
      ...this.calendarOptions,
      weekends: !this.calendarOptions.weekends,
    };
  }
  loadEventsFromBackend() {
    this.http.get<any[]>('http://localhost:8080/api/events/all').subscribe(data => {
      console.log('Backend Data:', data);

      const backendEvents: EventApi[] = data.map((event: ModuleInterfaceModule) => {
        return {
          id: event.id.toString(),
          title: event.title,
          start: parseISO(event.start),
          end: parseISO(event.end),
          backgroundColor: event.color,
          startStr: event.start,
          endStr: event.end,
          //other properties
        };
      });
      if (INITIAL_EVENTS.length < backendEvents.length) {
        for (let i = 0; i < backendEvents.length; i++) {
          let addevent: EventInput = { id: backendEvents[i].id, title: backendEvents[i].title, start: backendEvents[i].startStr, end: backendEvents[i].endStr, color: backendEvents[i].backgroundColor };
          INITIAL_EVENTS.push(addevent);
        }
      }

      console.log('test events', INITIAL_EVENTS);
      this.currentEvents = backendEvents;
      this.changeDetector.detectChanges();

      const calendarApi = this.fullcalendar?.nativeElement.fullCalendar;
      if (calendarApi) {
        console.log('Adding Event Source:', backendEvents);
        calendarApi.addEventSource(backendEvents);
      }
    });
  }  
}

静态实现的事件：

const TODAY_STR = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
export let INITIAL_EVENTS: EventInput[] = [
  {
    id: createEventId(),
    title: 'All-day event',
    start: TODAY_STR
  },
  {
    id: createEventId(),
    title: 'Timed event',
    start: TODAY_STR + 'T00:00:00',
    end: TODAY_STR + 'T03:00:00'
  },
  {
    id: createEventId(),
    title: 'Timed event',
    start: TODAY_STR + 'T12:00:00',
    end: TODAY_STR + 'T15:00:00'
  },
  {
    id: createEventId(),
    title: 'Timed event',
    start: '2024-01-28' + 'T11:00:00',
    end: '2024-01-28' + 'T12:00:00',
    backgroundColor:'red',
    
  }
];

html 文件：

<full-calendar #fullcalendar *ngIf="calendarVisible" [options]="calendarOptions">
      <ng-template #eventContent let-arg>
        <b></b>
        <i>{{ arg.event.title }}</i>
      </ng-template>
    </full-calendar>

ModuleInterface模块实体：

export class ModuleInterfaceModule {
    id!: number;
    title!: string;
    start!: string;
    end!: string;
    color!: string;
  }

Answer 1

如果有人遇到同样的问题并且对解决方案感兴趣，我没有直接更新 INITIAL_EVENTS 数组，而是尝试在从后端获取事件后使用 FullCalendar API 更新事件，代码：

    export class AppComponent implements OnInit, AfterViewInit {
      @ViewChild('fullCalendar') fullCalendar!: FullCalendarComponent;
      calendarVisible = true;
      initialEvents: EventInput[] = [];
      calendarOptions: CalendarOptions = {
        plugins: [
          interactionPlugin,
          dayGridPlugin,
          timeGridPlugin,
          listPlugin,
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        initialView: 'dayGridMonth',
        initialEvents: this.initialEvents,
        weekends: true,
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        select: this.handleDateSelect.bind(this),
        eventClick: this.handleEventClick.bind(this),
        eventsSet: this.handleEvents.bind(this),
      };
      currentEvents: EventApi[] = [];
      private calendarApi: Calendar | null = null;
    
      constructor(private changeDetector: ChangeDetectorRef, private http: HttpClient) {}
    
      ngOnInit() {
        this.loadEventsFromBackend();
      }
    
      ngAfterViewInit() {
        if (this.fullCalendar) {
          this.calendarApi = this.fullCalendar.getApi();
          console.log('Calendar API initialized:', this.calendarApi);
        } else {
          console.error('FullCalendar component not found.');
        }
      }
    
      loadEventsFromBackend() {
        this.http.get<any[]>('http://localhost:8080/api/events/all').subscribe(
          (backendEvents) => {
            const newEvents = backendEvents.map((backendEvent) => ({
              id: backendEvent.id.toString(),
              title: backendEvent.title,
              start: backendEvent.start,
              end: backendEvent.end,
              color: backendEvent.color
            }));
      
            if (this.calendarApi) {
              this.calendarApi.removeAllEvents();
              this.calendarApi.addEventSource(newEvents);
              this.calendarApi.refetchEvents();
            }
      
            this.changeDetector.detectChanges();
          },
          (error) => {
            console.error('Error fetching events from the backend', error);
          }
        );
      }
     handleEvents(events: EventApi[]) {
        this.currentEvents = events;
        this.changeDetector.detectChanges();
      }