如何在Angular中利用FullCalendar实现事件时间匹配时自动触发任务？

方案一：前端定时轮询（适合页面持续打开的场景） #

• 先通过FullCalendar的API获取当前的事件数据，避免和本地维护的数据出现不一致：

  import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
  import { FullCalendarComponent } from '@fullcalendar/angular';
  import { interval, Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  import { CalendarApi } from '@fullcalendar/core';
  
  @Component({
    // 组件元数据
  })
  export class CalendarComponent implements OnInit, OnDestroy {
    @ViewChild('calendar') calendarComponent: FullCalendarComponent;
    private calendarApi: CalendarApi;
    private destroy$ = new Subject<void>();
  
    ngOnInit() {
      this.calendarApi = this.calendarComponent.getApi();
      // 每60秒执行一次检查
      interval(60000)
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => this.checkAndTriggerEvents());
    }
  
    private checkAndTriggerEvents() {
      const now = new Date();
      const events = this.calendarApi.getEvents();
      
      events.forEach(event => {
        const eventStart = event.start;
        if (!eventStart) return;
  
        // 计算当前时间与事件开始时间的差值（允许1分钟误差）
        const diffMs = Math.abs(now.getTime() - eventStart.getTime());
        const diffMins = Math.floor(diffMs / 60000);
  
        // 检查是否到触发时间，且未触发过
        if (diffMins <= 1 && !event.extendedProps.triggered) {
          this.executeTask(event);
          event.setExtendedProp('triggered', true); // 标记为已触发，避免重复执行
        }
      });
    }
  
    private executeTask(event: any) {
      // 调用业务接口执行发送邮件等任务
      this.notificationService.sendEventAlert(event).subscribe(res => {
        console.log(`事件【${event.title}】通知已发送`);
      });
    }
  
    ngOnDestroy() {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

• 注意事项：必须统一事件时间与当前时间的时区，避免跨时区触发错误；页面关闭后定时器会停止，所以该方案仅适用于用户持续停留在日历页面的场景。

方案二：后端定时任务（可靠的持久化方案） #

• 前端仅负责事件的展示与编辑，触发逻辑完全交给后端：
  • 用户在FullCalendar中创建/更新事件时，将事件的开始时间、任务内容等信息存入数据库。
  • 后端使用定时任务框架（如Java的@Scheduled、Node.js的node-schedule），定期扫描数据库中未触发的事件。
  • 当事件的开始时间到达时，后端直接执行发送邮件等任务，并标记事件为已触发。
• 前端可通过WebSocket或短轮询获取事件触发状态，更新FullCalendar的事件显示（例如给已触发的事件添加特殊样式）。

方案三：结合视图变更优化事件检查 #

• 当用户切换FullCalendar的视图（如月视图转日视图）或日期范围时，同步更新待检查的事件列表，减少不必要的遍历：

  calendarOptions = {
    datesSet: (info) => {
      // 视图日期范围变更时，可重新拉取该范围内的事件（可选）
      this.eventService.fetchEventsInRange(info.startStr, info.endStr).subscribe(events => {
        // 可根据需求更新本地事件缓存
      });
    }
  };
  

内容的提问来源于stack exchange，提问作者Mudit Chouradiya