[Calendar] [theme] Calendar theme stylesheet customization isn't working as expected

[badalsaibo]

Description

Calendar theme stylesheet customization isn't working as expected. The theme props accepts the stylesheet object of the following structure as derived from its types

stylesheet?: {
        calendar?: {
            main?: object;
            header?: object;
        };
        day?: {
            basic?: object;
            period?: object;
        };
        dot?: object;
        marking?: object;
        'calendar-list'?: {
            main?: object;
        };
        agenda?: {
            main?: object;
            list?: object;
        };
        expandable?: {
            main?: object;
        };
 };

Hence, adding the following object to the theme prop should work

stylesheet: {
    calendar: {
        main: {
            week: {
                justifyContent: 'space-between',
                backgroundColor: 'blue',
            },
            monthView: {
                backgroundColor: 'red',
            },
            dayContainer: {
                alignItems: 'center',
                backgroundColor: 'blue',
            },
        },
    },
},

Expected Behavior

The theming should be applied.

Observed Behavior

The theming isn't applied.

Why is this happening

If you look at node_modules/react-native-calendars/src/calendar/style.js you'll observe that getStyle function has

...(theme['stylesheet.calendar.main'] || {})

this should be changed to

...(theme.stylesheet.calendar.main || {})

[ApacheEx]

+1 having the same issue, or we fix how we get the theme value, or types for Theme interface.

[badalsaibo]

For now as a workaround one can override the styles by directly setting the theme on stylesheet.calendar.main property like this

<Calendar
  theme={{
    'stylesheet.calendar.main': {
      week: {
        justifyContent: 'space-between',
        flexDirection: 'row',
      },
      monthView: {
        padding: 0,
        margin: 0,
      },
      dayContainer: {
        alignItems: 'center',
        flex: 1,
      },
      container: {
        padding: 0,
      },
    },
  }}
/>

[fabiendeborde]

I was updating an old project and had to update this library. The following theme keys were giving me Typescript error:

• 'stylesheet.calendar.header'
• 'stylesheet.calendar.main'

but they are still working, as stated above by @badalsaibo

I just had to add a comment above my code to prevent TS errors: // @ts-ignore: types / theme handling bug

I have no idea if in the newer version, the documentation is right or the types are, so I am going to finish updating this project as quickly as I can, so I don't enter a "dependencies update hell"...

[bartvanandel]

If you look at node_modules/react-native-calendars/src/calendar/style.js you'll observe that getStyle function has

...(theme['stylesheet.calendar.main'] || {})

this should be changed to

...(theme.stylesheet.calendar.main || {})

I think this is only half the solution For example, <ExpandableCalendar/> already uses ...(theme?.stylesheet?.expandable?.main || {}), however this overwrites the entire style of each provided component instead of simply augmenting it.

So, I think in all styles.js files, this call:

return StyleSheet.create({
  // default styles,
  ...(theme?.stylesheet?.xxx?.yyy || {}) // or worse, ...(theme['stylesheet.xxx.yyy'])
})

should ideally be changed into this:

return StyleSheet.flatten(
  {
    // default styles,
  }, 
  theme?.stylesheet?.xxx?.yyy ?? {}
})