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

Question

Could someone more experienced help me. I have such a problem. If items.tasks.person_id is equal to items.people.id event should have color people.color .

How to change the color of an event based on the color assigned to the person? The event has a person id, and the person object has a color.

Example items.tasks.person_id (123) === items.people.id (123) event should have color items.people.color (# e31e24)

Code here: 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

You can try this.

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

This should change the color of event.