stephy / CalendarPicker

CalendarPicker Component for React Native
786 stars 369 forks source link

Day touch targets are small with default styles #136

Open 8enmann opened 5 years ago

8enmann commented 5 years ago

Makes it hard to press them. Why not have TouchableOpacity fill the Day component?

8enmann commented 5 years ago

makeStyles.dayButton.height = '100%' makeStyles.dayButton.width = '100%' works way better

peacechen commented 5 years ago

Thanks for the PR. Setting the width & height to 100% causes the highlighted circle to be distorted. It depends on the container's width & height and how the CalendarPicker auto scales to fit within it.

image

Is there another container to apply that 100% size to without affecting the selected highlight?

8enmann commented 5 years ago

Updated PR

peacechen commented 5 years ago

It's still distorting the date highlight with the change to selectedDayLabel.

Also need to test custom date styles: https://github.com/stephy/CalendarPicker#custom-styling-individual-dates

8enmann commented 5 years ago

Sorry, won't have time for this for a while.

On Mon, Nov 19, 2018 at 10:03 AM Peace notifications@github.com wrote:

It's still distorting the date highlight with the change to selectedDayLabel.

Also need to test custom date styles: https://github.com/stephy/CalendarPicker#custom-styling-individual-dates

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/stephy/CalendarPicker/issues/136#issuecomment-439986689, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-UsDyheTMj_3-ReB7cEwl1uk-7VLUZks5uwvJrgaJpZM4YoIsC .

AgrYpn1a commented 2 months ago

@8enmann @peacechen Hey any updates with this? I was able to increase the size of touch targets by setting width and height to 100%, however, now the date numbers are miss aligned, they're not centered anymore.