在 Angular 中为 fullcalendar 获取 API 数据

Posted 2023-05-08

【中文标题】在 Angular 中为 fullcalendar 获取 API 数据

【英文标题】：Fetching API data in Angular for fullcalendar

【发布时间】：2021-12-09 10:28:39

【问题描述】：

我有返回用户账单的 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)
  

【参考方案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:
        */
      ;
    )
  

【讨论】：

在您最初为该问题显示的代码中，它已经在 getBills 中......否则我可能会注意到它

【参考方案2】：

你说

日期格式也正确

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

您可以在活动中使用的字段名称已在https://fullcalendar.io/docs/event-parsing 中明确记录。您需要指定start（用于事件的开始日期/时间）和可选的end（用于结束日期/时间）。

假设您的日期格式确实正确（根据https://fullcalendar.io/docs/date-parsing）然后

 title: e.Description, start: e.Date 

应该适合你。

【讨论】：

它仍然没有显示在日历中 - 我在控制台记录时的事件对象是：[ "title": "Electricity", "start": "2021-09-01" , “标题”：“电话账单”，“开始”：“2021-09-25”，“标题”：“互联网账单”，“开始”：“2021-09-20”]

@gcy2312 尝试将allDay: true 添加到对象中

仍然没有变化 - calendarBills 的 console.log 是：[ "title": "Electricity", "start": "2021-09-01", "allDay": true , " title": "电话账单", "start": "2021-09-25", "allDay": true , "title": "Internet Bill", "start": "2021-09-20", " allDay": true ] 但日历上仍然没有显示任何内容

@gcy2312 我刚刚注意到，eventSources: this.calendarBills 毫无意义。你有一个事件数组，而不是一个事件源对象。确保仅使用 events: this.CalendarBills 并从代码中删除 eventSource 选项。在这种情况下设置 allDay 标志不会产生任何影响，这不是有用的建议 - ShamPooSham 误解了 fullcalendar 的工作原理

@gcy2312 也只是为了仔细检查，希望这是显而易见的，但所有这些事件都发生在 9 月。目前是 10 月，因此您必须将日历向后移动一个月才能显示任何内容...我之所以提到这一点，是因为它偶尔会在该网站上吸引到以前的提问者 :-)