反応の大きいカレンダーのイベントの色を変更してください

Question

イベントがあるカレンダーを作成する必要があり、react-big-calendarを使用することにしました。しかし、私はさまざまな色のイベントを作る必要があります。したがって、各イベントにはいくつかのカテゴリがあり、各カテゴリには対応する色があります。反応してイベントの色を変更するにはどうしたらいいですか？

結果は、この

Answer 1

のようになります申し訳ありませんが、私は本当によく説明書を読んでいません。それはeventPropGetter属性の助けを借りて行うことができます。私はこのようにそれを作った：

eventStyleGetter: function(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: function() { 

    return (
     <Layout active="plan" title="Planning"> 
      <div className="content-app fixed-header"> 
       <div className="app-body"> 
        <div className="box"> 
         <BigCalendar 
          events={this.events} 
          defaultDate={new Date()} 
          defaultView='week' 
          views={[]} 
          onSelectSlot={(this.slotSelected)} 
          onSelectEvent={(this.eventSelected)} 
          eventPropGetter={(this.eventStyleGetter)} 
          /> 
        </div> 
       </div> 
      </div> 
     </Layout> 
    ); 
} 

Answer 2

イベントの異なる種類のスタイルを設定する方法についての追加のヒント：、私は、イベントオブジェクトのmyEventsアレイでは、私は、それぞれがブール型プロパティisMineオブジェクト与えた定義された：

<BigCalendar 

    // other props here 

    eventPropGetter={ 
    (event, start, end, isSelected) => { 
     let newStyle = { 
     backgroundColor: "lightgrey", 
     color: 'black', 
     borderRadius: "0px", 
     border: "none" 
     }; 

     if (event.isMine){ 
     newStyle.backgroundColor = "lightgreen" 
     } 

     return { 
     className: "", 
     style: newStyle 
     }; 
    } 
    } 
/>