Week calendar wrong alignment

[sfal]

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:

Strange behavior of dates on scroll, see

Monday 18 becomes 17 when scrolling back to it.

Environment

• npm ls react-native-calendars: react-native-calendars@1.265.0
• npm ls react-native: react-native@0.62.2

[cristiancedenogallego]

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.

react-native-calendars/src/expandableCalendar/weekCalendar.js

Line 63 in fb0d654

return this.props.calendarWidth || commons.screenWidth;

[sarthakgupta072]

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

[coderdiaz]

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

Can you share your solution? Thanks

[sarthakgupta072]

Umm, this was around a year back and I stopped working on the project I was working on. But this was the code snippet

const LinearCalendar = ({ currentDateString }) => {
  const dispatchCurrentDateString = useContext(CurrentDateStringDispatchContext)
  const todayBtnTheme = useRef({
    timelineContainer: {
      backgroundColor: "black",
    },
  })

  return (
    <View className='min-h-24'>
      <CalendarProvider
        date={currentDateString}
        onDateChanged={(date) =>
          dispatchCurrentDateString({
            type: "SET_CURRENT_DATE_STRING",
            payload: date,
          })
        }
        theme={todayBtnTheme.current}
      >
        <WeekCalendar
          disableOnPageChange={true}
          firstDay={1}
          theme={{
            calendarBackground: "transparent",
            textSectionTitleColor: "black",
            textInactiveColor: "black",
            selectedDayBackgroundColor: "#FE7A36",
            textDayFontWeight: "500",
            textDayHeaderFontWeight: "500",
            todayTextColor: "black",
          }}

          // https://github.com/wix/react-native-calendars/issues/1146
        />
      </CalendarProvider>
    </View>
  )
}

export default LinearCalendar

Let me know if this helps