CODEWITHSUNDEEP
javascriptjqueryreactjsfullcalendar
Lucas Santos
Lucas Santos

Reputation: 1369

How to get ReactJs to work with FullCalendar

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) enter image description here

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 {

  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;

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!

Upvotes: 1

Views: 12724

Answers (3)

glocore
glocore

Reputation: 2144

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"

Upvotes: 0

user1783736
user1783736

Reputation: 249

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

https://fullcalendar.io/docs/react

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

This component 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.

Upvotes: 2

iheanyi
iheanyi

Reputation: 424

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.

Upvotes: 7

Related Questions