fullcalendar react wrapper scheduler passing events

Question

I'm trying to use fullcalendar-react-wrapper-scheduler in my project.

The documentation shows an example of passing events into the FullCalendar component, however it does not show how to pass in resources.

I'm attempting to pass in "resources" by mimicking how "events" are being passed in. But that does not display any resources on the DOM.

Has anyone successfully used this package that can provide guidance for passing in resources?

Documentation: https://www.npmjs.com/package/fullcalendar-reactwrapper-scheduler#examples

Here's a code snippet showing how I am passing in events (successfully) and resources (not successfully):

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { connect } from 'react-redux';

import Nav from '../../components/Nav/Nav';



import { USER_ACTIONS } from '../../redux/actions/userActions';

import { LOGIN_ACTIONS } from '../../redux/actions/loginActions';



//START CALENDAR LIBRARY IMPORTS//
import FullCalendar from 'fullcalendar-reactwrapper-scheduler';
import 'fullcalendar-reactwrapper-scheduler/dist/css/fullcalendar.min.css';
//END CALENDAR LIBRARY IMPORTS//



const mapStateToProps = state => ({
    user: state.user,
});

class ExampleComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            events: [
                {
                    resourceId: 'a',
                    id: 1,
                    title: 'Shoot 1',
                    start: '2017-06-27T08:00:00',
                    end: '2017-06-27T09:00:00'
                },
                {
                    resourceId: 'b',
                    id: 2,
                    title: 'Shoot 2',
                    start: '2017-06-27T10:00:00',
                    end: '2017-06-27T11:00:00'
                },
                {
                    resourceId: 'a',
                    id: 3,
                    title: 'Shoot 3',
                    start: '2017-06-27T13:00:00',
                    end: '2017-06-27T14:00:00'
                },
                {
                    resourceId: 'c',
                    id: 4,
                    title: 'Shoot 4',
                    start: '2017-06-27T08:00:00',
                    end: '2017-06-27T09:00:00'
                },
                {
                    resourceId: 'd',
                    id: 5,
                    title: 'Shoot 5',
                    start: '2017-06-27T012:00:00',
                    end: '2017-06-27T13:00:00'
                },
            ],
            resources: [
                { id: 'a', title: 'Room A' },
                { id: 'b', title: 'Room B' },
                { id: 'c', title: 'Room C' },
                { id: 'd', title: 'Room D' },
            ]
        }
    }

    componentDidMount() {
        this.props.dispatch({
            type: USER_ACTIONS.FETCH_USER
        });
    }

    componentDidUpdate() {
        if (!this.props.user.isLoading && this.props.user.userName === null) {
            this.props.history.push('home');
        }
    }

    logout = () => {
        this.props.dispatch({
            type: LOGIN_ACTIONS.LOGOUT
        });
        // this.props.history.push('home');
    }

    render() {
        let content = null;

        if (this.props.user.userName) {
            content = (
                <div id="example-component">
                    <FullCalendar
                        id="your-custom-ID"
                        header={{
                            left: 'prev,next today myCustomButton',
                            center: 'title',
                            right: 'month,basicWeek,basicDay'
                        }}
                        defaultDate={'2017-06-27'}
                        navLinks={true} // can click day/week names to navigate views
                        editable={true}
                        eventLimit={true} // allow "more" link when too many events
                        events={this.state.events}
                        resources={this.state.resources}
                        defaultView='agendaDay'

                    />
                </div>
            );
        }

        return (
            <div>
                <Nav />
                {content}
            </div>
        );
    }
}

// this allows us to use <App /> in index.js
export default connect(mapStateToProps)(ExampleComponent);

Answer 1

Looking through the source code, it looks like fullcalendar-reactwrapper-scheduler doesn't support resources.

You have a couple of options. You can use another library that is specifically made for React, such as react-calendar. This is the best approach.

If for some reason you are absolutely set on using Fullcalendar, you can integrate jQuery with your React app and then use Fullcalendar directly without the wrapper. But using jQuery with React is just asking for trouble, so I strongly advise against this approach.