Dynamic colors of events about react-native-big-calendar HOT 7 CLOSED

Hi @nyblad ! Thanks for your interest. Yes, you can add each cell style dynamically by passing a function to eventCellStyle.

Like this:

<Calendar
  height={600}
  events={events}
  eventCellStyle={event => ({ backgroundColor: event.colorCode })}
/>

See more:

from react-native-big-calendar.

I am using the above approach to integrate but not getting the color changed.
<Calendar
theme={darkTheme}
mode={'month'}
hideNowIndicator={false}
startAccessor="start"
endAccessor="end"
events={calendarEvents}
eventCellStyle= {(event) => {
const backgroundColor = event.reg.match(true) ? 'red' : 'blue'
return { backgroundColor }
}
}
date={date}
/>

from react-native-big-calendar.

@arya2311

Same analogy.

 <Calendar 
   style={styles.calendar} 
   height={SCREEN_HEIGHT} 
   events={events} 
   eventCellStyle={(event) => { 
     const color = event.title.match(/Meeting/) ? 'red' : 'blue' 
     return { color } 
   }} 

from react-native-big-calendar.

Feel free to reopen if you still have a question.

from react-native-big-calendar.

how to change text color dynamic generated event

from react-native-big-calendar.

@arya2311

Same analogy.

 <Calendar 
   style={styles.calendar} 
   height={SCREEN_HEIGHT} 
   events={events} 
   eventCellStyle={(event) => { 
     const color = event.title.match(/Meeting/) ? 'red' : 'blue' 
     return { color } 
   }} 

@acro5piano how to change position of the event in event cell

from react-native-big-calendar.

@JessyAngel07 Try to set marginTop or top. If it does not work, try to use renderEvent to get the full control of rendering logic.

from react-native-big-calendar.