更改事件颜色.对象事件具有人员 ID，人员对象具有事件颜色

Question

更有经验的人可以帮助我吗？我有这样的问题。 如果items.tasks.person_id等于items.people.id则事件应具有颜色people.color。

如何根据分配给人员的颜色更改事件的颜色？事件具有人员 ID，人员对象具有颜色。

示例items.tasks.person_id (123)===items.people.id (123)事件应具有颜色items.people.color (# e31e24)

此处代码：https://stackblitz.com/edit/react-v71fhc

class App extends Component {
constructor() {
super();
this.state = {
events: []
};  
}
componentDidMount() {
let appointments = {
"items": {
"tasks": [
{
"id": "1",
"person_id": "123",
'title': 'Some Event',
'start': new Date(2019, 7, 28, 0, 0, 0),
'end': new Date(2019, 7, 28, 0, 0, 0)
},
{
"id": "2",
"person_id": "456",
'title': 'DTS ENDS',
'start': new Date(2019, 7, 28, 0, 0, 0),
'end': new Date(2019, 7, 28, 0, 0, 0)          
}
],
"people": [
{
"id": "456",
"color": "#5cb85c"
},
{
"id": "123",
"color": "#e31e24"
}
]
}
}
let appoint = appointments.items.tasks
console.log(appoint)
for (let i = 0; i < appoint.length; i++) {
appoint[i].id = appoint[i].id;
appoint[i].title = appoint[i].title;
appoint[i].start = moment.utc(appoint[i].start).toDate();
appoint[i].end = moment.utc(appoint[i].end).toDate();      
}
this.setState({
events:appoint
})

}
render() {
return (
<div>
<Calendar
localizer={localizer}
events={this.state.events}
startAccessor="start"
endAccessor="end"
defaultView="week"
defaultDate={moment().toDate()}
/>
</div>
);
}
}

Answer 1

你可以试试这个。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);
class App extends Component {
constructor() {
super();
this.state = {
events: []
};
}
componentDidMount() {
let appointments = {
"items": {
"tasks": [
{
"id": "1",
"person_id": "123",
'title': 'Some Event',
'start': new Date(2019, 7, 28, 0, 0, 0),
'end': new Date(2019, 7, 28, 0, 0, 0)
},
{
"id": "2",
"person_id": "456",
'title': 'DTS ENDS',
'start': new Date(2019, 7, 28, 0, 0, 0),
'end': new Date(2019, 7, 28, 0, 0, 0)
}
],
"people": [
{
"id": "456",
"color": "#5cb85c"
},
{
"id": "123",
"color": "#e31e24"
}
]
}
}
let appoint = appointments.items.tasks
console.log(appoint)
for (let i = 0; i < appoint.length; i++) {
appoint[i].id = appoint[i].id;
appoint[i].title = appoint[i].title;
appoint[i].start = moment.utc(appoint[i].start).toDate();
appoint[i].end = moment.utc(appoint[i].end).toDate();
const color = appointments.items.people.find(aPeople => aPeople.id === appoint[i].person_id).color
appoint[i].hexColor = color
}
this.setState({
events: appoint
})

}
eventStyleGetter = (event, start, end, isSelected) => {
console.log(event);
var backgroundColor = event.hexColor;
var style = {
backgroundColor: backgroundColor,
borderRadius: '0px',
opacity: 0.8,
color: 'black',
border: '0px',
display: 'block'
};
return {
style: style
};
}
render() {
return (
<div>
<Calendar
localizer={localizer}
events={this.state.events}
startAccessor="start"
endAccessor="end"
defaultView="week"
defaultDate={moment().toDate()}
eventPropGetter={(this.eventStyleGetter)}
/>
</div>
);
}
}
render(<App />, document.getElementById('root'));

这应该会更改事件的颜色。