TypeError: date[(“get" + method)] 不是 React-big-calendar 中的函数 [英] TypeError: date[("get" + method)] is not a function in React-big-calendar
问题描述
我正在尝试逐月更改视图，但同时它给了我一个错误.我是反应和反应大日历的新手，有人可以帮我解决这个问题吗?当我将日历视图更改为月时，它工作正常，但是当我将其更改为周或日时，它给了我一个错误.请帮帮我谢谢
代码
import React, { Component } from 'react';从'react-redux'导入{连接}；从redux"导入 { bindActionCreators };从'react-big-calendar'导入MyCalendar；从 './toolbar' 导入 CustomToolbar；从'react-popup'导入弹出窗口；从'./input'导入输入；从时刻"导入时刻；import { fetchEvents, createEvent, updateEvent, deleteEvent } from '../actions';//通过向正确的定位器提供时刻(或全球化)对象来设置定位器.const localizer = MyCalendar.momentLocalizer(moment);//或 globalizeLocalizer类日历扩展组件{componentDidMount() {this.props.fetchEvents();}//渲染单个事件弹出内容renderEventContent(slotInfo) {const date = moment(slotInfo.start).format('MMMM D, YYYY');返回 (<div><p>日期:<strong>{日期}</strong></p><p>主题:{slotInfo.taskChage}</p><p>时间:{slotInfo.time}</p><p>日期:{ slotInfo.date}</p><p>注释:{slotInfo.notes}</p><p>用户 ID:{slotInfo.userId}</p>);}//选择事件处理函数onSelectEventHandler = (slotInfo) =>{弹出窗口.创建({标题:slotInfo.title，内容:this.renderEventContent(slotInfo),纽扣: {对: [{文字:'编辑'，班级名称:'信息'，动作:函数(){Popup.close();//关闭以前的弹出窗口this.openPopupForm(slotInfo);//打开新的编辑弹出窗口}.绑定(这个)}, {文字:'删除'，班级名称:'危险'，动作:函数(){//调用事件删除操作this.props.deleteEvent(slotInfo.id);Popup.close();}.绑定(这个)}]}});}//在选择事件插槽上处理函数onSelectEventSlotHandler = (slotInfo) =>{this.openPopupForm(slotInfo);//打开创建/编辑事件的弹出窗口}//用于创建和编辑事件的弹出窗体功能openPopupForm = (slotInfo) =>{让 newEvent = false;let popupTitle = "更新事件";if(!slotInfo.hasOwnProperty('id')) {slotInfo.id = moment().format('x');//生成带有Unix毫秒时间戳的idslotInfo.title = null;slotInfo.taskChange = null;slotInfo.message=null;popupTitle = "创建事件";新事件 = 真；}让 titleChange = 函数(值){slotInfo.title = 值；};让 taskChange = 函数(值){slotInfo.taskChage = 值；};让 timeChange = 函数(值){slotInfo.time = 值；};让 dateChnage = 函数(值){slotInfo.date=值；};让notesChange = 函数(值){slotInfo.notes=值；};让用户 ID = 函数(值){slotInfo.userId=value;};弹出窗口.创建({标题:弹出标题，内容:<div><Input onChange={titleChange} placeholder="Subject"/><Input onChange={taskChange} placeholder="任务类型"/><Input onChange={timeChange} placeholder="Time"/><Input onChange={dateChnage} placeholder="Date"/><Input onChange={notesChange} placeholder="Notes"/><Input onChange={userId} placeholder="用户 ID"/>
,纽扣: {左:['取消']，对: [{文本:'保存'，班级名称:'成功'，动作:函数(){//检查创建/更新的ID属性如果(新事件){this.props.createEvent(slotInfo);//事件创建动作} 别的 {this.props.updateEvent(slotInfo);//事件更新动作}Popup.close();}.绑定(这个)}]}});}//用于设置事件项目的事件样式获取器eventStyleGetter(事件，开始，结束，isSelected){let current_time = moment().format('YYYY MM DD');let event_time = moment(event.start).format('YYYY MM DD');让背景 = (current_time>event_time) ?'#DE6987':'#8CBD4C'；返回 {风格: {backgroundColor: 背景}};}使成为() {返回 (<div className="日历容器"><我的日历弹出可选择的定位器={定位器}defaultView={MyCalendar.Views.WEEK}组件={{工具栏:自定义工具栏}}意见={['周']}样式={{高度:600}}事件={this.props.events}eventPropGetter={(this.eventStyleGetter)}onSelectEvent={(slotInfo) =>this.onSelectEventHandler(slotInfo)}onSelectSlot={(slotInfo) =>this.onSelectEventSlotHandler(slotInfo)}/>{console.log(this.props.event)}<弹出窗口/>
);}}函数 mapStateToProps(state) {返回 {事件:state.events};}函数 mapDispatchToProps(dispatch) {返回 bindActionCreators({获取事件，创建事件，更新事件，删除事件}， 派遣);}导出默认连接(mapStateToProps，mapDispatchToProps)(日历)；
对于发现此问题的任何人，一些事情.
您的 localizer 在幕后处理日期的操作.您传入的所有日期(从您的 getNow 和 date 道具，一直到您的个人 event.start 和 event.end 日期)应该是真正的 JS Date 对象.
你的各种方法道具，用于处理 events 或设置样式或其他任何东西，将接收真正的 JS Date 对象，而不是 localizer 对象或UTC 字符串或其他.
RBC 仅适用于真正的 JS Date 对象.如果你传递它 moment 实例或日期字符串或其他东西，它可能会显示，但它会运行起来很时髦，因为 RBC 将在幕后处理所有转换，并且它使用了 date-arithmatic 库在内部使用真正的 JS Dates 而不是您的 localizer 对象.
I am trying to change the view from month to week but in meantime it give me an error . I am new to react and react-big-calendar could someone please help me how to solve this problem . When I change calendar view to month it working fine but when I changed it to week or day so it give me an error. please help me Thanks
Code
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);
For anyone finding this, a few things.
Your localizer handles manipulation of dates under the hood. All dates that you pass in (from your getNow and date props, all the way to your individual event.start and event.end dates) should be true JS Date objects.
Your various method props, for working with events or setting styling or whatever, will receive true JS Date objects, not localizer objects or UTC strings or whatever.
RBC will only work with true JS Date objects. If you pass it moment instances or date strings or something else, it might display but it will operate funky, as RBC will handle all conversions under the hood, and it's use of the date-arithmatic library, internally, works with true JS Dates and not your localizer objects.
这篇关于TypeError: date[(“get" + method)] 不是 React-big-calendar 中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
