![](/img/trans.png)
[英]Invalid prop `selected` of type `String` supplied to `Calendar`, expected instance of `Date`?
[英]react-big-calendar ERROR: Invalid prop `slotStart` of type `date` supplied to `Popup`, expected `number`
我正在使用prop“popup”作为react-big-calendar,我在控制台中点击“+ x more”链接时出现上述错误。 我的onEventClick函数通过将我路由到“calendar /”来工作,但我不确定我在这里缺少什么。 我阅读了一些文档,但找不到解决问题的正确示例。 我怀疑它与“时刻”或日期对象的格式不正确有关。
import React from "react";
import BigCalendar from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
const localizer = BigCalendar.momentLocalizer(moment);
let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);
class Calendar extends React.Component {
onEventChange = event => {
this.onEventClick(event);
};
onEventClick = event => {
this.setState({
endDate: moment(event.end.toLocaleString()).format("YYYY-MM-DDTHH:mm"),
startDate: moment(event.start.toLocaleString()).format("YYYY-MM-DDTHH:mm"),
eventName: event.name
});
this.props.history.push("calendar/" + event.eventId);
};
render () {
function Event({ event }) {
return (
<span id="eventTitle">
{event.number +
" - " +
event.name}
</span>
);
}
return(
<React.Fragment>
<div style={{ height: 700 }}>
<BigCalendar
localizer={localizer}
toolbar={true}
events={this.state.events}
popup
selectable
onSelectSlot={(slotInfo) => alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}`
)}
views={allViews}
components={{
event: Event
}}
onSelectEvent={event => this.onEventChange(event)}
eventPropGetter={(event) => {
let newStyle = {
backgroundColor: "",
color: "white",
borderRadius: "5px",
border: "none"
};
if (event.eventStatusCd === "CL ") {
newStyle.backgroundColor = "firebrick";
}
return {
className: "",
style: newStyle
};
}}
/>
</div>
</React.Fragment>
);
}
}
export default Calendar;
以下是事件对象的“start”属性的示例。 此对象被推送到其他事件对象的数组中:
eventObj.start = new Date(
Date.parse(
moment
.utc(dateCreated)
.local()
.format("YYYY-MM-DDTHH:mm")
)
);
我在第一次实施时遇到了类似的问题。 虽然react-big-calendar使用内部本地化程序(在您的情况下可能是Moment),但它仍然期望在您提供的events
中,所有start
日期和end
日期必须是有效的JS日期对象。 我的建议是,不是运行Date.parse()
,而是执行以下操作:
eventObj.start = moment(dateCreated).local().toDate(); // returns valid JS Date Object
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.