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

问题描述 投票:0回答:1

所以,我正在尝试在我的网站主页上实现一个小日历,这就是我通过 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 项目中调用这些方法。

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

angular typescript calendar fullcalendar
1个回答
0
投票

我理解这种担忧,并且要充分利用 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

希望这有帮助:)

© www.soinside.com 2019 - 2024. All rights reserved.