如何在 Angular 项目中访问 Fullcalendar 中的“事件”数组元素？

Question

所以，我正在尝试在我的网站主页上实现一个小日历，这就是我通过 Fullcalendar Angular 指南:

完成它的方法

home.component.ts

export class HomeComponent {


  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin, interactionPlugin],
    dateClick: (arg) => this.handleDateClick(arg),
    events: [
      { title: 'Primo Evento', date: '2024-04-06' },
      { title: 'Secondo Evento', date: '2024-04-13' }
    ]
  };

  handleDateClick(arg: any) {
    alert('date click! ' + arg.dateStr)
  }
}

现在的问题是，我想将“标题”参数（例如“Primo Evento”）显示到单击某个日期后弹出的警报中，但我不知道如何访问“事件” “CalendarOptions 内的数组。我到处都找过，但似乎找不到在 Angular 项目中执行此操作的具体指南。

我在 Fullcalendar 官方网站上找到的唯一东西是 Js 特有的，他们使用了像“getEvents()”这样的方法，我似乎无法在 Angular 项目中调用这些方法。

提前感谢任何可以提供帮助的人！

Answer 1

我理解这种担忧，并且要充分利用 fullCalendar 功能，最好在 .ts 文件中使用 CalednarAPI，您几乎可以用它来执行所有操作。

在 .html 中

<full-calendar #calendar [options]="calendarOptions()" [events]="eventsPromise | async">
                            </full-calendar>

在.ts文件中

export class HomeComponent implements AfterViewInit {
  @ViewChild('calendar') calendarComponent: FullCalendarComponent;
  public calendarApi: Calendar;
  eventsPromise = new BehaviorSubject<any[]>([]);
  calendarOptions: CalendarOptions = {
      initialView: 'dayGridMonth',
      plugins: [dayGridPlugin, interactionPlugin],
      dateClick: arg => this.handleDateClick(arg),
      events: [
          { title: 'Primo Evento', date: '2024-04-06' },
          { title: 'Secondo Evento', date: '2024-04-13' }
      ]
  };

  ngAfterViewInit(): void {
      this.calendarApi = this.calendarComponent?.getApi();
  }

  handleDateClick(arg: any) {
      alert('date click! ' + arg.dateStr);
  }
}

现在使用

this.calendarApi

和

eventsPromise

将让您操作事件数组并尝试从

events

 中删除 

calendarOptions.events

希望这有帮助:)