Question

我从后端API动态地捕获事件，但是当我进行调用compoentWillMount()时，就好像日历首先加载而没有获取事件，因此它不会在日历上加载/显示事件。我一直在浏览文档并尝试不同的解决方案，但没有任何成功的方法。我的组件代码：

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;

我当前要做的就是动态地获取事件，然后将其加载到日历中并显示出来。

Answer 1

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

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

1 个答案: