在Angular中為fullcalendar獲取API資料

我有回傳用戶賬單的api資料的功能，然后映射資料以符合fullcalendar - 當我控制臺記錄“this.calendarBills”時，它的json格式和日期格式也正確，但是當我設定“事件”的完整日歷到 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)
  }

uj5u.com熱心網友回復：

謝謝您的幫助！設法找到了問題 - 不得不在 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:
        */
      };
    })
  }

uj5u.com熱心網友回復：

你說

日期格式也正確

...也許是這樣，但 fullCalendar 無法識別或理解date為事件的屬性名稱。它不會讀取它并將其用作日期。因此，fullCalendar 不知道將您的事件放置在日歷的哪個位置，這就是您看不到它的原因。

您可以在事件中使用的欄位名稱已在https://fullcalendar.io/docs/event-parsing中明確記錄。您需要指定start（對于事件的開始日期/時間）和可選的end（對于結束日期/時間）。

假設您的日期格式確實正確（根據https://fullcalendar.io/docs/date-parsing）然后

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

應該為你作業。

標籤：javascript 有角的 全日历 fullcalendar-5

上一篇：帶有Angular組件的Chart.js-型別'string'不可分配給型別'ChartTitleOptions|不明確的'

下一篇：Angular中的轉義字符