所以,我正在尝试在我的网站主页上实现一个小日历,这就是我通过 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 项目中调用这些方法。
提前感谢任何可以提供帮助的人!
我理解这种担忧,并且要充分利用 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
希望这有帮助:)