时间戳

首页 > 解决方案 > fullcalendar 反应包装器调度程序传递事件

reactjs - fullcalendar 反应包装器调度程序传递事件

问题描述

我正在尝试在我的项目中使用 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);

标签： reactjswrapperfullcalendar-scheduler

解决方案

翻看源代码，好像fullcalendar-reactwrapper-scheduler不支持资源。

你有几个选择。您可以使用专门为 React 制作的另一个库，例如react-calendar。这是最好的方法。

如果出于某种原因你完全决定使用 Fullcalendar，你可以将 jQuery 与你的 React 应用程序集成，然后直接使用 Fullcalendar 而无需包装器。但是在 React 中使用 jQuery 只是自找麻烦，所以我强烈建议不要使用这种方法。

推荐阅读