月単位から週単位にビューを変更しようとしているのですが、その間にエラーが発生します。私は react と react-big-calendar の初心者なので、誰かこの問題を解決する方法を教えていただけませんか。カレンダー ビューを月単位に変更すると正常に動作しますが、週単位または日単位に変更するとエラーが発生します。助けてください。ありがとうございます
コード
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);
ベストアンサー1
これを見つけた人のために、いくつかお知らせがあります。
はlocalizer
、内部で日付の操作を処理します。渡すすべての日付 ( およびgetNow
プロパティから、個々のおよび日付date
まで) は、真の JSオブジェクトである必要があります。event.start
event.end
Date
スタイル設定などを操作または設定するためのさまざまなメソッド プロパティは、オブジェクトや UTC 文字列などではなく、真の JS オブジェクトevents
を受け取ります。Date
localizer
RBC は、真の JS オブジェクトでのみ動作します。インスタンスや日付文字列などDate
を渡すと、表示はされるものの、RBC がすべての変換を内部で処理し、ライブラリを内部的に使用するため、動作が不安定になります。これは、オブジェクトではなく、真の JS で動作するためです。moment
date-arithmatic
Date
localizer