Question

我正在尝试在我的项目中使用fullcalendar-react-wrapper-scheduler。

文档显示了将事件传递到FullCalendar组件的示例，但是没有显示如何传递资源。

我试图通过模仿“事件”的传递方式来传递“资源”。但这在DOM上不显示任何资源。

有人成功使用了该套件，可以为资源的传递提供指导吗？

文档： https://www.npmjs.com/package/fullcalendar-reactwrapper-scheduler#examples

这是一个代码片段，显示了我如何成功传递事件和资源（不成功）：

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

浏览源代码，看来fullcalendar-reactwrapper-scheduler不支持资源。

您有两种选择。您可以使用另一个专门为React创建的库，例如react-calendar。这是最好的方法。

如果出于某种原因您绝对希望使用Fullcalendar，则可以将jQuery与React应用程序集成，然后直接使用Fullcalendar，而无需使用包装器。但是将jQuery与React结合使用只会带来麻烦，因此我强烈建议您不要使用这种方法。

全日历反应包装调度程序传递事件

1 个答案: