Propagate text and base styles from theme to day and calendar

While theme can change some global properties of the calendar, it does not take into account the text and base styles. For example: theme={{ todayTextColor: 'red', base: { width: 20, height: 20, justifyContent: 'center' }, text: { marginTop: 0, fontSize: 13.5, } }} only update the todayTextColor. Also I noticed there’s a default 32 width for the day box in calendar which can also needs to take the value from the theme base style.

[tautvilas]

Hi, it is not feasible to make the callendar ux fully customizable. If there is a need for a very different design then it would be best to give you a way to provide a way to override renderDay method.

What is the problem that you are trying to solve with such customization?

[gabrielgilini]

I personally think the theme prop strategy is very limiting so I went ahead and introduced the styleSheet prop to Calendar, which I passed down the nodes and appended to each component’s style array. This allowed me to freely override defaults and customize the looks to my need. I don’t think it’s complete enough to create a PR, but I’ll just link to my commit in case anyone is going through a similar problem.

I.e.:

const calendarStyles = StyleSheet.create({
  header: {
    backgroundColor: colors.azure,
    paddingVertical: 10
  },
  week: {
    backgroundColor: colors.azure,
    marginTop: 0,
    paddingBottom: 10,
  },
  monthText:{
    fontSize: 24,
    lineHeight: 30,
    margin: 0,
    letterSpacing: 1.45,
    color: colors.paleGrey,
  },
  dayHeader: {
    fontSize: 18.2,
    color: colors.paleGrey,
  },
  day: {
    justifyContent: 'center'
  },
  dayText: {
    fontSize: 18.2,
    color: colors.warmGreyThree,
    marginTop: 0,
  },
  todayText: {
    fontSize: 18.2,
    color: colors.warmGreyThree,
    marginTop: 0,
  },
  disabledText: {
    opacity: 0.5,
    fontSize: 18.2,
    color: colors.warmGreyThree
  }
});

<Calendar
  style={styles.calendar}
  monthFormat='MMMM'
  markedDates={marked}
  renderArrow={(direction) => <Icon name={direction == 'left' ? 'navLeft' : 'navRight'} />}
  styleSheet={calendarStyles} />