reactjs - 类型错误 : date[ ("get" + method)] is not a function in React-big-calendar

Question

我试图每月更改一次 View ，但同时它给了我一个错误。我是 react 新手， react 大日历有人可以帮助我如何解决这个问题。当我将日历 View 更改为月份时，它工作正常，但是当我将其更改为周或日时，它会给我一个错误。请帮助我谢谢

代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import MyCalendar from 'react-big-calendar';
import CustomToolbar from './toolbar';
import Popup from 'react-popup';
import Input from './input';
import moment from 'moment';
import { fetchEvents, createEvent, updateEvent, deleteEvent } from '../actions';


// Setup the localizer by providing the moment (or globalize) Object to the correct localizer.
const localizer = MyCalendar.momentLocalizer(moment); // or globalizeLocalizer

class Calendar extends Component {

    componentDidMount() {
        this.props.fetchEvents();
    }

    //RENDER SINGLE EVENT POPUP CONTENT
    renderEventContent(slotInfo) {
        const date = moment(slotInfo.start).format('MMMM D, YYYY');
        return (
            <div>
                <p>Date: <strong>{date}</strong></p>
                <p>Subject: {slotInfo.taskChage}</p>
                <p>Time : {slotInfo.time}</p>
                <p>Date : { slotInfo.date}</p>
                <p>Notes : {slotInfo.notes}</p>
                <p>User Id : {slotInfo.userId}</p>
            </div>
        );
    }

    //ON SELECT EVENT HANDLER FUNCTION
    onSelectEventHandler = (slotInfo) => {
        Popup.create({
            title: slotInfo.title,
            content: this.renderEventContent(slotInfo),
            buttons: {
                right: [{
                    text: 'Edit',
                    className: 'info',
                    action: function () {
                        Popup.close(); //CLOSE PREVIOUS POPUP
                        this.openPopupForm(slotInfo); //OPEN NEW EDIT POPUP
                    }.bind(this)
                }, {
                    text: 'Delete',
                    className: 'danger',
                    action: function () {
                        //CALL EVENT DELETE ACTION
                        this.props.deleteEvent(slotInfo.id);
                        Popup.close();
                    }.bind(this)
                }]
            }
        });
    }

    //HANDLE FUNCITON ON SELECT EVENT SLOT
    onSelectEventSlotHandler = (slotInfo) => {
        this.openPopupForm(slotInfo); //OPEN POPUP FOR CREATE/EDIT EVENT
    }

    //POPUP-FORM FUNCTION FOR CREATE AND EDIT EVENT
    openPopupForm = (slotInfo) => {
        let newEvent = false;
        let popupTitle = "Update Event";
        if(!slotInfo.hasOwnProperty('id')) {
            slotInfo.id = moment().format('x');  //Generate id with Unix Millisecond Timestamp
            slotInfo.title = null;
            slotInfo.taskChange = null;
            slotInfo.message=null;
            popupTitle = "Create Event";
            newEvent = true;
        }

        let titleChange = function (value) {
            slotInfo.title = value;
        };
        let taskChange = function (value) {
            slotInfo.taskChage = value;
        };

        let timeChange = function (value) {
            slotInfo.time = value;
        };

        let dateChnage = function ( value){
            slotInfo.date=value;
        };


        let notesChange = function ( value){
            slotInfo.notes=value;
        };

        let userId = function ( value){
            slotInfo.userId=value;
        };

        Popup.create({
            title: popupTitle,
            content: <div>
                        <Input onChange={titleChange} placeholder="Subject" />
                        <Input onChange={taskChange} placeholder="Task Type"  />
                        <Input onChange={timeChange} placeholder="Time"/>
                        <Input onChange={dateChnage} placeholder="Date"/>
                        <Input onChange={notesChange} placeholder="Notes"/>
                        <Input onChange={userId} placeholder="User Id"/>
                    </div>,
            buttons: {
                left: ['cancel'],
                right: [{
                    text: 'Save',
                    className: 'success',
                    action: function () {
                        //CHECK THE ID PROPERTY FOR CREATE/UPDATE
                        if(newEvent) {
                            this.props.createEvent(slotInfo); //EVENT CREATE ACTION
                        } else {
                            this.props.updateEvent(slotInfo); //EVENT UPDATE ACTION
                        }
                        Popup.close();
                    }.bind(this)
                }]
            }
        });
    }

    //EVENT STYLE GETTER FOR SLYLING AN EVENT ITEM
    eventStyleGetter(event, start, end, isSelected) {
        let current_time = moment().format('YYYY MM DD');
        let event_time = moment(event.start).format('YYYY MM DD');
        let background = (current_time>event_time) ? '#DE6987' : '#8CBD4C';
        return {
            style: {
                backgroundColor: background
            }
        };
    }

    render() {
        return (
            <div className="calendar-container">
                <MyCalendar
                    popup
                    selectable
                    localizer={localizer}
                    defaultView={MyCalendar.Views.WEEK}
                    components={{toolbar: CustomToolbar}}
                    views={['week']}
                    style={{height: 600}}
                    events={this.props.events}
                    eventPropGetter={(this.eventStyleGetter)}
                    onSelectEvent={(slotInfo) => this.onSelectEventHandler(slotInfo)}
                    onSelectSlot={(slotInfo) => this.onSelectEventSlotHandler(slotInfo)}
                />
                {console.log(this.props.event)}
                <Popup />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        events: state.events
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ 
        fetchEvents, 
        createEvent, 
        updateEvent, 
        deleteEvent
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Calendar);

Answer 1

对于发现此内容的人，有几件事。

您的本地化器在后台处理日期操作。您传入的所有日期(从 getNow 和 date 属性，一直到您个人的 event.start 和 event。 end 日期)应该是真正的 JS Date 对象。

用于处理事件或设置样式等的各种方法 Prop 将接收真正的 JS Date 对象，而不是 localizer 对象或UTC 字符串或其他任何内容。

RBC 仅适用于真正的 JS Date 对象。如果您传递给它 moment 实例或日期字符串或其他内容，它可能会显示，但运行起来会很时髦，因为 RBC 将在后台处理所有转换，并且它使用 date-arithmatic 库在内部与真正的 JS Date 一起使用，而不是您的 localizer 对象。