Question

我试图将视图从一个月更改为一个星期，但与此同时它给了我一个错误。我是新来的要做出反应的人，所以有人可以帮我解决这个问题。当我将日历视图更改为月份时，它可以正常工作，但是当我将其更改为星期或一天时，它给我一个错误。请帮帮我，谢谢

代码

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

对于发现此问题的任何人，有几件事。

您的localizer处理有关日期的操作。您传递的所有日期（从您的getNow和date道具，一直到您的个人event.start和event.end日期）都应为JS Date对象。

您使用events或设置样式等各种方法的道具将收到真正的JS Date对象，而不是localizer对象或UTC字符串或其他任何内容。

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

Answer 2

请确保您的const multerPath = '/some/psth/to/multer'; var storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, multerPath); }, filename: function(req, file, cb) { cb(null, file.originalname); } });对象中的var filePath = req.file client.upload(`${multerPath}/${filePath.filename}`, params, function(uri) { .... });和start键具有正确的值，您的end对象应类似于：

event

TypeError：date [（“ get” + method）]不是React-big-calendar中的函数

2 个答案: