在Angular中为fullcalendar获取API数据

Question

我有函数返回用户账单的api数据，然后映射数据以符合fullcalendar -当我控制台记录"this. calendarbills"时;它的json格式和日期格式也正确，但当我设置&;events&;对于完整的日历。calendarBills，它在日历上没有返回任何内容…

export class BillPageComponent implements OnInit {
userId = localStorage.getItem('userId') || '';
token = localStorage.getItem('token') || '';
bills: Bill[] = [];
calendarBills: [] = [];
calendarOptions: CalendarOptions | undefined;
constructor(
public fetchApiData: FetchApiDataService,
public snackBar: MatSnackBar,
public dialog: MatDialog,
) { }
ngOnInit(): void {
this.getBills(this.userId, this.token);
}
getBills(userId: string, token: string): void {
this.fetchApiData.getBills(userId, token).subscribe((resp: any) => {
this.bills = resp;
this.calendarBills = resp.map((e: any) => ({ title: e.Description, date: e.Date }))
console.log(this.bills);
console.log(this.calendarBills);

this.calendarOptions = {
headerToolbar: {
center: 'title',
},
initialView: 'dayGridMonth',
eventSources: this.calendarBills,
events: this.calendarBills, // alternatively, use the `events` setting to fetch from a feed
weekends: true,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
dateClick: this.handleDateClick.bind(this),
// select: this.handleDateSelect.bind(this),
// eventClick: this.handleEventClick.bind(this),
// eventsSet: this.handleEvents.bind(this)
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
};
})
}
handleDateClick(arg: { dateStr: string; }) {
alert('date click! ' + arg.dateStr)
}

Answer 1

感谢您的帮助!设法找到了问题-必须调用getBills中的calendarOptions。同时，非常感谢ADyson(这些是我没有意识到的问题类型!)

getBills(userId: string, token: string): void {
this.fetchApiData.getBills(userId, token).subscribe((resp: any) => {
this.bills = resp;
this.calendarBills = resp.map((e: any) => ({ title: e.Description, start: e.Date, allDay: true }));
console.log(this.bills);
console.log(this.calendarBills);
// return this.calendarBills;
this.calendarOptions = {
headerToolbar: {
center: 'title',
},
initialView: 'dayGridMonth',
events: this.calendarBills, // alternatively, use the `events` setting to fetch from a feed
weekends: true,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
dateClick: this.handleDateClick.bind(this),
// select: this.handleDateSelect.bind(this),
// eventClick: this.handleEventClick.bind(this),
// eventsSet: this.handleEvents.bind(this)
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
};
})
}

Answer 2

你说

日期格式也正确

…也许是这样，但是fullCalendar不能识别或理解date作为事件的属性名。它不会读取它并将其用作日期。因此，fullCalendar不知道将您的事件放在日历上的哪个位置，这就是为什么您无法看到它。

您可以在事件中使用的字段的名称已经在https://fullcalendar.io/docs/event-parsing上清楚地记录了。您需要指定start(用于事件的开始日期/时间)，还可以指定end(用于结束日期/时间)。

假设你的日期格式正确(按照https://fullcalendar.io/docs/date-parsing)，那么

{ title: e.Description, start: e.Date }

应该对你有用。