stephy / CalendarPicker

CalendarPicker Component for React Native

787 stars 369 forks source link

selectedRangeStartStyle and selectedRangeEndStyle styling #234

Open Jere2357 opened 3 years ago

Jere2357 commented 3 years ago

Issue on styling selectedRangeStartStyle and selectedRangeEndStyle

I'm using Expo and I can't style my selectedRangeStartStyle and selectedRangeEndStyle into box figured, it's always rounded.
I hope someone has solution.
I want to style my selectedRangeStartStyle and selectedRangeEndStyle into this:

dave-martinez commented 3 years ago

I have encountered this problem.

My plan was to make the range start and end to circle but apparently, there is a wrapper around the start and end date range that handles the border radius.

Hoping that we expose the wrapper prop and allow custom styling for range start and end dates.

Jere2357 commented 3 years ago

Yeah, @dave-martinez I also observed that the text that the selectedRangeStartStyle and selectedRangeEndStyle has no color style prop in order to make the start and end text color different from other selected date range.

peacechen commented 3 years ago

Please submit a PR and I'll review right away 👍

peacechen commented 3 years ago

Reviewing the code, it should be possible to achieve what you want. https://github.com/stephy/CalendarPicker/blob/master/CalendarPicker/Day.js#L207

For the text color of the selected day(s), use selectedDayTextStyle. A bug with that prop was fixed in 7.0.7.

Props selectedRangeStartStyle and selectedRangeEndStyle should override the defaults for the container styling.

tnghia944 commented 3 years ago

hi @Jere2357 , @dave-martinez Have you solved this problem yet, can you help me