Tengo la función para devolver los datos de API para las facturas de los usuarios, y luego asigné los datos para que se ajusten al calendario completo: cuando registro en la consola "this.calendarBills", su formato json y la fecha también tienen el formato correcto, pero cuando configuro " events" para fullcalendar a this.calendarBills, no devuelve nada en el calendario...
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) }¡gracias por la ayuda! Logré encontrar el problema: tuve que llamar a calendarOptions DENTRO de getBills. Además, muchas gracias a ADyson (¡esos son los tipos de problemas que tengo sin darme cuenta!)
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: */ }; }) }Usted dijo
la fecha también tiene el formato correcto
... tal vez sea así, pero fullCalendar no reconoce ni entiende la date como un nombre de propiedad de un evento. No lo leerá ni lo usará como fecha. Por lo tanto, fullCalendar no sabe dónde colocar su evento en el calendario, por lo que no puede verlo.
Los nombres de los campos que puede usar en sus eventos ya están claramente documentados en https://fullcalendar.io/docs/event-parsing . Debe especificar el start (para la fecha/hora de inicio del evento) y, opcionalmente, también el end (para la fecha/hora de finalización).
Suponiendo que su fecha realmente tenga el formato correcto (según https://fullcalendar.io/docs/date-parsing ), entonces
{ title: e.Description, start: e.Date }debería funcionar para ti.