wix / react-native-calendars

React Native Calendar Components 🗓️ 📆
MIT License
9.61k stars 2.97k forks source link

Is it possible set background for header and give a padding to main body? #454

Closed jamessawyer closed 6 years ago

jamessawyer commented 6 years ago

I want to set backgroundColor for header, so I try this:

<Calendar
      style={styles.calendar}
      theme={theme}
    />
// the theme part
theme = {
'stylesheet.calendar.header': {
    header: {
      // override the default header style react-native-calendars/src/calendar/header/style.js
      backgroundColor: '#3359b4', // set the backgroundColor for header
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingVertical: 15,
      borderTopLeftRadius: 8,
      borderTopRightRadius: 8,
    },
    monthText: {
      color: '#fff',
      fontWeight: '700',
      fontSize: 16,
    },
    dayHeader: {
      marginTop: 2,
      marginBottom: 7,
      width: 30,
      textAlign: 'center',
      fontSize: 14,
      color: '#fff',
    },
  },
}

I also wanna give a padding value for days and weeks, not including the header.So I give the container a padding:

const styles = EStyleSheet.create({
  calendar: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    borderWidth: 0,
    paddingHorizontal: '5%', // give a padding horizontal
  },
});
<Calendar
      style={styles.calendar}
      theme={theme}
    />

But I found the header also get the padding horizontal, which makes header backgroundColor wired. So is is possible give the days and weeks a style wrapper? sorry for the messy issue Add a style wrapper for main body #442.

jamessawyer commented 6 years ago

After reading source codebase carefully, I found combine monthView in 'stylesheet.calendar.main' with week in 'stylesheet.calendar.header' can do the trick.