ReactJS FullCalendar 不会将事件加载到日历中

Question

Im grabbing the events dynamically from my backend API however when I make the call compoentWillMount() its as if the calendar is loading first and not getting the events so its not loading/displaying the events on the calendar. I keep looking through the docs and trying different solutions and cant get anything to succeed. My components code:

import React from "react";
import Tooltip from "tooltip.js";
import moment from 'moment';

import ErrorBoundary from "../Utils/ErrorBoundary";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";


import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";

class ChoreCalendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chores: [],
      events: []
    };
  }

  componentWillMount() {
    fetch('http://localhost:8080/api/chores')
    .then(res => res.json())
    .then((data) => {
      this.setState({ chores: data })

      data.data.forEach(chore => {
        this.state.events.push({
          title: chore.title,
          date: moment(chore.dueDate).format("YYYY-MM-DD"),
          color: "green",
          textColor: "white"
        })
      });
    })
    .catch(console.log)
  }

  eventRender(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.title,
      placement: "top",
      trigger: "click",
      container: "body"
    });
  }

  render() {
    return (
      <div className="ibox">
        <div className="ibox-content">
          <ErrorBoundary>
            <FullCalendar
              id="fullCalendar"
              defaultView="dayGridMonth"
              plugins={[dayGridPlugin, interactionPlugin]}
              events={this.state.events}
              eventRender={this.eventRender}
              schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
            />
          </ErrorBoundary>
        </div>
      </div>
    );
  }
}

export default ChoreCalendar;

All I'm currently trying to do is dynamically grab the events and then load them into the calendar and have them show.

Answer 1

在 FullCalender 标签中添加 initialEvent 属性并为其分配一些具有初始值的状态。