如何讓 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。

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 包裝器，它可以很好地與 Create React App 配合使用。 您可以像這樣直接導入它們，而不是通過 Sass 導入 CSS：

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