Question

我在FullCalendar中使用React app，现在我正尝试切换到新的v4 FullCalendar，因为我想停止将v3 FullCalendar与{{ 1}}，一开始我切换到jQuery库，但是这个库在外部事件的fullcalendar-reactwrapper功能方面存在问题，这使我直接去尝试droppable。这是一个非常稳定的版本，但是我确实成功地使它能够随着动态事件的变化而工作。

我在( v4 )上做了一个小型演示：https://codesandbox.io/s/w2kk08j6l7

，我在事件列表中已经存在一个固定的事件codesandbox，添加新事件Event 01后，日历未按预期更新。

任何建议都非常欢迎，在此先感谢

Answer 1

React的依赖关系不正确，您需要为日历组件插入一些插件。我更改了您的代码，这可行。

https://codesandbox.io/s/pedantic-mclean-cxnih

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ChannelCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick

import "./styles.css";

class App extends Component {
  state = {
    events: [
      {
        id: 1,
        start: "2019-08-10",
        end: "2019-08-12",
        title: "Event 01"
      }
    ]
  };
  addEvents = () => {
    const newEvent = {
      id: 2,
      start: "2019-08-18",
      end: "2019-08-21",
      title: "Event 02"
    };
    this.setState({ events: this.state.events.concat(newEvent) });
  };

  render() {
    return (
      <div className="App">
        <ChannelCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          editable={true}
          events={this.state.events}
        />
        <button onClick={this.addEvents}>Add More Events</button>

        <div>
          {this.state.events.map(event => (
            <div key={event.id}>
              {event.id} - {event.title}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

React FullCalendar V4不会使用新事件更新日历视图

1 个答案: