search

wix / react-native-calendars

React Native Calendar Components 🗓️ 📆
MIT License
9.52k stars 2.95k forks source link

Week calendar wrong alignment #1146

Open sfal opened 4 years ago

sfal commented 4 years ago

Description

Week calendar is not displaying correctly. Alignment is not respected and weird behavior occurs on scroll.

Expected Behavior

Calendar dates being aligned with day names.

Observed Behavior

The dates are not aligned with day names, see: Image

Strange behavior of dates on scroll, see

gif

Monday 18 becomes 17 when scrolling back to it.

Environment

cristiancedenogallego commented 4 years ago

Searching in the source code i found that by default weekcalendar width is 100% screen width maybe this is relationed with the bug, this value is used to calculate some width elements by example width of week content (The reason for not aligned items) you can specify calendarWidth prop to weekcalendar to change this value.

https://github.com/wix/react-native-calendars/blob/fb0d6543294c8047978934a98201d174d567fa25/src/expandableCalendar/weekCalendar.js#L63

sarthakgupta072 commented 6 months ago

I was facing this issue for past 2 days. What helped was removing all the styling in the WeekCalendar element and also all styling of the container wrapping the WeekCalendar element.

WeekCalendar takes the screenWidth to occupy the space and does not respect the margins or the padding you might give