如何让ReactJs与FullCalendar一起使用

Question

我很难让FullCalendar与ReactJs一起正常工作.日历显示但看起来不正确并且传入参数$("#calendar").fullCalendar()不会做任何事情,如下图所示.(应该有第6 - 8天突出显示为绿色)

所以我开始使用create-react-app,它只是为我启动项目所需的所有依赖项,例如Babel和什么不是.

然后制作了2个非常简单的React类,如下所示:

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.