Change backgroundColor of react-native-calendars

Question

I'm making an app with react-native-calendars.

I want to change the background color of the calendar to blue.

<Calendar 
   style={{backgroundColor: "blue"}}
/>

I've tried the following, but the problem is that only the borders of the calendar change.

I want the background of the entire calendar to turn blue.

Please reply if you know a solution.

Thanks.

Answer 1

Can you try this ,

<Calendar
        style={{ backgroundColor: 'transparent' }}
        theme={{
          calendarBackground: 'transparent', 
        }}
      />

Set calendarBackground to your desired color

Answer 2

If your background won't change, wrap your calendar with a View and modify the theme component in react-native-calanders, this allows you to access calendarBackground, and set it to the desired colour:

<View>
  <Calendar
    theme = {{
         calendarBackground: "*Your colour here*"
    }}
/>