在 Angular 中为 fullcalendar 获取 API 数据

Question

我有返回用户账单的 api 数据的功能，然后映射数据以符合 fullcalendar - 当我控制台记录“this.calendarBills”时，它的 json 格式和日期格式也正确，但是当我将 fullcalendar 的“事件”设置为 this.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 }

应该适合你。