如何让 ReactJs 与 FullCalendar 一起工作答案

【问题标题】：How to get ReactJs to work with FullCalendar如何让 ReactJs 与 FullCalendar 一起工作
【发布时间】：2020-06-11 19:55:06
【问题描述】：

我很难让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;

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

这是我的 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"
  }
}

我已经尝试了所有我能想到的方法，但仍然没有运气，非常感谢您的帮助。

非常感谢！

【问题讨论】：

标签： javascript jquery reactjs fullcalendar

【解决方案1】：

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

【讨论】：

一个简单的问题，Redux 存储更新不会反映在日历上。我错过了什么吗？
@LucasSantos 我也有同样的问题，这些事件在这里不起作用..请提供相关信息......
Redux 商店没有更新它。有什么解决办法吗？
我想过滤资源。我使用删除资源然后使用 adrescourcs 方法，但它不起作用

【解决方案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 使用的标准版本。

【讨论】：

【解决方案3】：

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

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

【讨论】：