如何使ReactJ与FullCalendar一起工作

Question

我很难让FullCalendar与ReactJ一起正常工作。日历会显示出来，但它看起来不正确，将参数传递给$("#calendar").fullCalendar()不会做任何事情，从下面的图像中可以看到。(第6-8天应突出绿色)

​

因此，我从创建反应-应用程序开始，它直接为我启动了所有所需的依赖关系，比如Babel等等。

然后制作了两个非常简单的反应性类，如下所示：

import React, { Component } from 'react';
import './App.css';

import $ from 'jquery';
import 'moment/min/moment.min.js';

import 'fullcalendar/dist/fullcalendar.css';
import 'fullcalendar/dist/fullcalendar.print.min.css';
import 'fullcalendar/dist/fullcalendar.js';


class Calendar extends Component {

  componentDidMount(){
    const { calendar } = this.refs;

    $(calendar).fullCalendar({events: this.props.events});
  }

  render() {
    return (
      <div ref='calendar'></div>
    );
  }

}


class App extends Component {
  render() {

    let events = [
      {
        start: '2017-01-06',
        end: '2017-01-08',
        rendering: 'background',
        color: '#00FF00'
      },
    ]

    return (
      <div className="App">
        <Calendar events={events} />
      </div>
    );
  }
}

export default App;

我不知道错误在哪里，所以我做了任何人都会做的事情，并在谷歌上查看是否有人已经遇到了这个问题，而我在这个问题上偶然遇到了本短片教程，但仍然没有正常工作。

下面是我的package.json文件：

{
  "name": "cal-test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "fullcalendar": "^3.1.0",
    "jquery": "^3.1.1",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我试过所有我能想到的，但仍然没有运气，帮助是非常感谢的。

非常感谢!

Answer 1

这段视频的创作者。我会删除对import 'fullcalendar/dist/fullcalendar.print.min.css';的调用，因为它很可能会覆盖前面样式表的CSS。

Answer 2

最新版本的v4 of Fullcalendar.io现在有ReactJS文档。我将使用FullCalendar创建者推荐的React组件：

https://fullcalendar.io/docs/react

FullCalendar与React框架无缝集成。它提供了一个与FullCalendar标准API的功能完全匹配的组件。 此组件由Sardius的乔希·鲁夫与FullCalendar的维护人员合作构建和维护。这是官方的反应连接器，发布在麻省理工学院的许可，相同的许可证，标准版本的FullCalendar使用。

Answer 3

完整日历现在提供了一个反应包装，它与Create一起工作得很好。与通过Sass导入CSS不同，您可以直接导入它们，如下所示：

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