प्रतिक्रिया-बड़े कैलेंडर घटनाओं का रंग बदलें

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 
     }; 
    } 
    } 
/>