TypeError: date[("get" + method)] 不是 React-big-calendar 中的函数

Posted 2023-02-21

【中文标题】TypeError: date[("get" + method)] 不是 React-big-calendar 中的函数

【英文标题】：TypeError: date[("get" + method)] is not a function in React-big-calendar

【发布时间】：2019-12-08 19:08:16

【问题描述】：

我正在尝试逐月更改视图，但同时它给了我一个错误。我是新来的反应和反应大日历有人可以帮我解决这个问题。当我将日历视图更改为月份时，它工作正常，但是当我将其更改为周或日时，它会给我一个错误。请帮帮我谢谢

代码

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);

【问题讨论】：

错误是什么？

@CatarinaFerreira TypeError: date[(“get” + method)]

我遇到了同样的错误。我最初将我的所有事件设置为allDay: true，在将其更改为 false 并从月视图切换到周视图后出现此错误：d[("get" + method)] is not a function。 start 和 end 日期值是 moment 对象。日历上的localizer 也是moment。

【参考方案1】：

const formatted = moment(time).toDate();

【参考方案2】：

确保您的 event 对象中的 start 和 end 键值正确， 你的 event 对象应该是这样的：

data = [
  
    title: "My event",
    allDay: false,
    start: new Date(2020, 10, 25, 10, 0), // 10.00 AM
    end: new Date(2020, 10, 25, 11, 0), // 2.00 PM
  
  ]

【参考方案3】：

对于任何发现这个的人，一些事情。

您的localizer 在后台处理日期操作。您传入的所有日期（从您的 getNow 和 date 道具，一直到您的个人 event.start 和 event.end 日期）都应该是真正的 JS Date 对象。

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

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

【讨论】：

你救了我！非常感谢。我的活动的开始和结束日期是moment 格式。改为 moment().toDate()`

该组件不适用于其他日期格式。您需要将日期转换为 javascript 的 Date() 对象。