Week Calendar misalignment, unable to disable scroll

[martenjurgens]

Description

Calendar dates aren't aligned with day names, unable to disable the scroll. Very weird scroll behaviour.

Expected Behavior

Calendar dates are aligned with day names, props actually work and do what they are supposed to.

Observed Behavior

Dates are not aligned with the day names.

Scroll is still enabled despite passing scrollEnabled={false} to it.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: react-native-calendars@1.1301.0
• npm ls react-native: react-native@0.72.5

Also specify:

1. Device/emulator/simulator & OS version: Devices and emulators (Android and IOS)

Reproducible Demo

Just use the week calendar

[nguyenhoanganhdev]

I have same issue. When set padding or margin even borderWidth for container have WeekCalendar. I fix it by set calendarWidth={measure.scree.width- "paddingHorizontal"}. And set the same for width container . And it work but when scroll Dates are not aligned with the day name a little bit when press on day it aligned with the day. And I also want to disable scroll too

[cengizhanhakan]

Same here

[steq28]

Here with react-native@0.72.7 and react-native-calendars@1.22.0 I don't have this problem. Try to update.

[guilhermerera]

Hello everyone! We had this very exact same bug. What I did to work it around was: I removed every style that changes the container size and added it to another <View/> inside the container. It does not fix the bug, but it works around it.

The component tree looks kinda like this:

<View style={styles.container}>
  <View style={styles.backgroundStyleView} />
  <WeekCalendar
    calendarWidth={YOU_SHOULD_SET_THE_WIDTH_TO_MATCH_CONTAINER_WIDTH}
    ...otherWeekCalendarProps
  />
</View>

and the styling looks kinda like this:

container: {
    position: 'relative',

    //MARGIN WONT AFFECT THE BEHAVIOR AND IT WAS REQUIRED IN MY DESIGN
    marginTop: 24, 
},
backgroundStyleView: {
    // THESE WILL SET THE VIEW TO BE THE EXACT SAME SIZE AS THE CONTAINER
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: '100%',

    // THESE ARE THE STYLES I NEEDED THE CONTAINER TO HAVE, YOU CAN ADD YOUR OWN
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Color.Grey1,
    backgroundColor: Color.OffWhite,

    // THIS WILL MAKE SURE THE VIEW IS VISUALY BEHIND THE CALENDAR AND THE TOUCH WILL BE IN THE CALENDAR
    zIndex: -1,
    pointerEvents: 'none',
},

about the YOU_SHOULD_SET_THE_WIDTH_TO_MATCH_CONTAINER_WIDTH, in my case I've set it to screenWidth - 44 because I had a paddingHorizontal:22 in an outside component that was constraining my container (and therefore the WeekCalendar) width size.

Hope it helps! :)

---

Extra:

What was causing the issue was the borderWidth: 1. Apparently, as nguyenhoanganhdev mentioned on his comment, any styling that forces the container/WeekCalendar width to change will cause the scroll malfunction, even if setting the calendarWidth correctly. Hope this information helps the maintainers to find a solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tran-simon]

Found a fix https://github.com/wix/react-native-calendars/issues/2182#issuecomment-2276605921

Managed to fix this issue by forcing the calendar width

const MyCalendar = () => {
  const [width, setWidth] = useState<number>();

  return (
    <View onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
      <CalendarProvider date="2024-08-08">
        <ExpandableCalendar
          key={width} // Force rerendering the calendar on width change
          calendarWidth={width}
        />
      </CalendarProvider>
    </View>
  );
};