React-native-calendars: Advanced Style - stylesheet.day.basic - not working

[JeanPSF]

Description

1-2 sentences describing the problem you're having or the feature you'd like to request
-Can't edit today style by using 'Advanced Styling'(stylesheet.day.basic)

Expected Behavior

What action did you perform, and what did you expect to happen?

• Change font weight/color for today

Observed Behavior

What actually happened when you performed the above actions?

• nothing

Environment

• npm ls react-native-calendars:
  `-- [email protected]
• npm ls react-native:
  `-- [email protected]

Also specify:

1. Phone/emulator/simulator & version:
   Name: Nexus_7_API_27 CPU/ABI: Google APIs Intel Atom (x86)
   Target: google_apis [Google APIs] (API level 27)

Reproducible Demo

  <Calendar
    style={miniCalendarComponentStyle.overlay}
    markingType={'custom'}
    markedDates={{
      '2019-04-16': {selected: true},
      '2019-04-17': {selected: true},
      '2019-04-18': {disabled: true},
      '2019-04-19': {disabled: true, disableTouchEvent: true}
    }}
    theme={{
      backgroundColor: '#ffffff',
      calendarBackground: '#ffffff',
      textSectionTitleColor: '#999999',
      //selectedDayBackgroundColor: cores.branco,
      selectedDayTextColor: cores.cancelarComponentes,
      selectedDayFontWeight: 'bold',
      todayTextColor: cores.cinzaTextoSelecionadoSistema,
      dayTextColor: cores.pretoIcones,
      textDisabledColor: cores.bordaComponentes,
      arrowColor: cores.primariaComponentes,
      monthTextColor: cores.pretoSistema,
      textDayFontFamily: 'Montserrat',
      textMonthFontFamily: 'Montserrat',
      textDayHeaderFontFamily: 'Montserrat',
      textMonthFontWeight: 'bold',
      textDayFontSize: 16,
      textMonthFontSize: 16,
      textDayHeaderFontSize: 16,
      'stylesheet.day.basic': {
        today: {
          fontWeight: '600',
          backgroundColor: 'red'
        },
        todayText: {
          fontWeight: '600',
          color: 'red',
        },
        text: {
          fontWeight: '600',
        },
      },
    }}
  />

[JeanPSF]

Solved by removing line markingType={'custom'}

[GuillermoRivera]

@JeanPSF does it work for selected and selectedText too? I haven't been able to make them work together

[JeanPSF]

@GuillermoRivera Sorry, i didn't try with selectedText

[GuillermoRivera]

So, if you try with

<Calendar
...
markingType="custom"
markedDates={{
  'date-1': {
    customStyles: {
       ...your custom styles
    },
  },
  'date-2': {
    customStyles: {
       ...your custom styles
    },
  },
  theme={{
    'stylesheet.day.basic': {
      'base': {
        width: X,
        height: Y,
        ...otherStyles,
  }},
}}
/>

So if you customize your basic days and also have markedDates object with custom styles, you are not going to be able of having both working. Even if you remove the markingType and put the selected and today dates in the theme object, it is going to be ignored.

[aldrineplata]

If you want to use markType="custom" try using 'stylesheet.day.single' instead.