search

BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
936 stars 325 forks source link

Ability to manipulate the text of the day so that only the first letter is capitalized #265

Closed ysmike closed 3 years ago

ysmike commented 3 years ago

Changing the text format of the day from all uppercase to all lowercase (e.g. TUE --> tue) can be done by setting the prop: dateNameStyle={{ textTransform: 'lowercase' }}

However, if I'd like only the first letter capitalized, I'm not sure if there is a workaround for this since I cannot use pseudo elements (e.g. ::first-letter). Does anyone how this might be done?

peacechen commented 3 years ago

The localization props allow you to customize any of the date strings. https://github.com/BugiDev/react-native-calendar-strip#localization

ysmike commented 3 years ago

I set the weekdaysShort prop in the locale object to all lowercase but the calendar strip component is still rendering them in all caps. Is there anywhere else I can look to solve this issue?

I also noticed that moment.weeksdaysShort() does not return days in all uppercase:[ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]

peacechen commented 3 years ago

You're right, the day component changes it to uppercase 😮 https://github.com/BugiDev/react-native-calendar-strip/blob/c8eb2caf90f38cc7394e8075b6800d4a70b35e46/src/CalendarDay.js#L481

Apologies for not catching that. We'll need to add a prop to control whether it does an uppercase on the day names. Would you mind submitting a PR with a new prop upperCaseDays (default to true)?

peacechen commented 3 years ago

PR merged and published in 2.1.9