Fetching API data in Angular for fullcalendar-CodePudding

I have the function to return the api data for the user bills, and then mapped the data to conform to fullcalendar - when I console log the "this.calendarBills" its json format and the date is also formatted correctly, but when I set "events" for fullcalendar to this.calendarBills, it returns nothing on the calendar...

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)
  }

CodePudding user response：

thanks for the help! Managed to find the problem - had to call the calendarOptions INSIDE the getBills. Also, big thanks to ADyson (those are the types of issues I have without realizing!)

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:
        */
      };
    })
  }

CodePudding user response：

You said

the date is also formatted correctly

...maybe so, but fullCalendar doesn't recognise or understand date as a property name of an event. It will not read it and use it as a date. Therefore, fullCalendar doesn't know where to place your event on the calendar, which is why you can't see it.

The names of the fields you can use in your events are clearly documented already at https://fullcalendar.io/docs/event-parsing. You need to specify start (for the start date/time of the event) and optionally also end (for the end date/time).

Assuming your date really is formatted correctly (as per https://fullcalendar.io/docs/date-parsing) then

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

should work for you.