fullcalendar реагировать на планировщик оболочки, передавая события - PullRequest
Новая
       7

fullcalendar реагировать на планировщик оболочки, передавая события

0 голосов
/ 27 июня 2018

Я пытаюсь использовать в своем проекте fullcalendar-response-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);

1 Ответ

0 голосов
/ 27 июня 2018

Просматривая исходный код, похоже, что fullcalendar-reactwrapper-scheduler не поддерживает ресурсы.

У вас есть несколько вариантов. Вы можете использовать другую библиотеку, специально созданную для React, например response-calendar . Это лучший подход.

Если по какой-то причине вы абсолютно настроены на использование Fullcalendar, вы можете интегрировать jQuery с вашим приложением React, а затем использовать Fullcalendar напрямую, без оболочки. Но использование jQuery с React просто напрашивается на неприятности, поэтому я настоятельно рекомендую не использовать этот подход.

...