如何让ReactJs与FullCalendar一起使用

Question

我很难让FullCalendar与ReactJs正常合作。日历显示但看起来不正确，并且向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; 传递参数不会执行任何操作，如下图所示。 （应该有第6 - 8天突出显示为绿色）

所以我开始使用create-react-app，只需为所有必需的依赖项（例如Babel和其他内容）跳转启动项目。

然后制作了两个非常简单的React类：

{
  "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"
  }
}

我不知道错误在哪里，所以我做了任何人都会做的事情并且谷歌四处看看是否有人已经遇到过这个问题而且我遇到this short video tutorial就是这样但仍然无法正常工作。

这是我的 package.json 文件：

{{1}}

我尝试了所有我能想到的东西但仍然没有运气，非常感谢帮助。

非常感谢你！

Answer 1

该视频的创建者。我会删除对import 'fullcalendar/dist/fullcalendar.print.min.css';的调用，因为它最有可能覆盖之前样式表的CSS。

Answer 2

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

https://fullcalendar.io/docs/react

  

FullCalendar与React JavaScript无缝集成   框架。它提供的组件与   FullCalendar的标准API的功能。

     

此组件由Sardius Media的Josh Ruff构建和维护   与FullCalendar的维护者合作。它是   官方的React连接器，根据MIT许可发布，相同   许可FullCalendar使用的标准版本。

Answer 3

Fullcalendar现在提供了React wrapper，并且可以与Create React App很好地配合使用。您可以像这样直接导入它们，而不是通过Sass导入CSS：

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