search

wix / react-native-calendars

React Native Calendar Components 🗓️ 📆
MIT License
9.58k stars 2.96k forks source link

Theming Documentation #2499

Open cstayyab opened 3 months ago

cstayyab commented 3 months ago

Description

I have been trying to customize the calendar (period borderRadius etc) but could not find proper documentation so I had to dig through the code and use hit and trail method to see what effects what?

Expected Behavior

https://wix.github.io/react-native-calendars/docs/Components/Calendar#theme should have detailed information about theming.

Observed Behavior

No proper theming documentation, just a heading.

Additional Information

If you can point me to/help me understand basics of theming I am willing to dig the rest myself and submit the PR for updated documentation

cstayyab commented 3 months ago

On a related note:

Following style of Header Styling Works (but instead of merging with default style, it totally overrides it)

<Calendar
    theme={{
            'stylesheet.calendar.header': {
              dayHeader: {
                textTransform: 'uppercase',
              },
              disabledDayHeader: {
                textTransform: 'uppercase',
              },
            },
     }}
 />

And this does not work at all (whereas it should)

<Calendar
    theme={{
            stylesheet: { calendar: {header: {
              dayHeader: {
                textTransform: 'uppercase',
              },
              disabledDayHeader: {
                textTransform: 'uppercase',
              },
            },
     }}}}
 />
devpenzil commented 3 months ago

I would like to help on this. ❤️