ReactJsをFullCalendarと連携させる方法

Question

FullCalendarがReactJsで正しく動作するように苦労しています。カレンダーが表示されますが、正しく表示されず、$("#calendar").fullCalendar()の引数を渡しても、下の画像からわかるように何も行われません。 （6日目持っている必要があります - 8は、緑色で強調表示）

は、だから私はちょうどジャンプcreate-react-appで始まっは、バベル、何ないように必要なすべての依存関係を私のためのプロジェクトを開始します。私は間違いが誰かがすでにこの問題に遭遇した場合ので、私は誰が何をしますかなかったと見て周りグーグルで見当もつかない

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; 

と：

はその後2非常に単純なので、のようなクラスに反応作ら私は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" 
    } 
} 

Iv'eは、私は考えることができるすべて、まだ運を試してみました、ヘルプは大歓迎です。

ありがとうございました！

Answer 1

このビデオの作成者はこちら。私はimport 'fullcalendar/dist/fullcalendar.print.min.css';への呼び出しを取り除きました。なぜなら、その前にスタイルシートのCSSを上書きする可能性が最も高いからです。