J'ai du mal à faire fonctionner FullCalendar avec ReactJs. Le calendrier apparaît mais il n'a pas l'air correct et le fait de passer des arguments à $("#calendar").fullCalendar() ne fait rien comme vous pouvez le voir sur l'image ci-dessous. (les jours 6 à 8 doivent être surlignés en vert) entrez la description de l'image ici

J'ai donc commencé avec create-react-app qui démarre le projet pour moi avec toutes les dépendances nécessaires telles que Babel et autres.

Ensuite, vous avez créé 2 classes React très simples comme ceci:

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;

Je n'ai aucune idée de l'origine de l'erreur, j'ai donc fait ce que n'importe qui ferait et rechercher sur Google pour voir si quelqu'un a déjà rencontré ce problème et je suis tombé sur ce court didacticiel vidéo sur exactement cela et ne fonctionne toujours pas correctement.

Voici mon fichier 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 a essayé tout ce à quoi je pouvais penser et toujours pas de chance, l'aide est grandement appréciée.

Merci beaucoup!

1
Lucas Santos 17 janv. 2017 à 04:00

1 réponse

Meilleure réponse

Créateur de cette vidéo ici. Je supprimerais cet appel à import 'fullcalendar/dist/fullcalendar.print.min.css';, car il remplace probablement le CSS de la feuille de style qui le précède.

7
iheanyi 17 janv. 2017 à 01:27