javascript - How to get ReactJs to work with FullCalendar - Stack Overflow

admin管理员组

文章数量:1287489

I'm having a hard time getting FullCalendar to work properly with ReactJs. The calendar shows up but it does not look correct and passing in arguments to $("#calendar").fullCalendar() does NOT do anything as you can see from the image below. (should have day 6 - 8 highlighted green)

So I started out with create-react-app that just jump starts the project for me with all of the needed dependencies such as Babel and what not.

Then made 2 very simple React classes like so:

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 {

  ponentDidMount(){
    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;

I have no clue where the mistake is so I did what anyone would do and google around to see if someone has already ran into this issue and I came across this short video tutorial on exactly this and still does not work properly.

Here is my package.json file:

{
  "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 tried everything I could think of and still no luck, help is greatly appreciated.

Thank you so much!

I'm having a hard time getting FullCalendar to work properly with ReactJs. The calendar shows up but it does not look correct and passing in arguments to $("#calendar").fullCalendar() does NOT do anything as you can see from the image below. (should have day 6 - 8 highlighted green)

So I started out with create-react-app that just jump starts the project for me with all of the needed dependencies such as Babel and what not.

Then made 2 very simple React classes like so:

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 {

  ponentDidMount(){
    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;

I have no clue where the mistake is so I did what anyone would do and google around to see if someone has already ran into this issue and I came across this short video tutorial on exactly this and still does not work properly.

Here is my package.json file:

{
  "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 tried everything I could think of and still no luck, help is greatly appreciated.

Thank you so much!

• javascript
• jquery
• reactjs
• fullcalendar

Share Improve this question Follow edited Jan 17, 2017 at 1:06 Lucas Santos asked Jan 17, 2017 at 1:00 Lucas SantosLucas Santos 1,36944 gold badges2626 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

creator of that video here. I'd remove that call to import 'fullcalendar/dist/fullcalendar.print.min.css';, because it's most likely overriding the CSS of the stylesheet before it.

The latest version v4 of Fullcalendar.io now has ReactJS documentation. I would use the React Components remended by the FullCalendar creators:

https://fullcalendar.io/docs/react

FullCalendar seamlessly integrates with the React JavaScript framework. It provides a ponent that exactly matches the functionality of FullCalendar’s standard API.

This ponent is built and maintained by Josh Ruff of Sardius Media in partnership with the maintainers of FullCalendar. It is the official React connector, released under an MIT license, the same license the standard version of FullCalendar uses.

Fullcalendar now provides a React wrapper, and it works nicely with Create React App. Instead of importing CSS via Sass, you can import them directly like so:

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

本文标签： javascriptHow to get ReactJs to work with FullCalendarStack Overflow