Skip to content

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

Open
@badalsaibo

Description

@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 || {})

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions