WeekCalendar component align problem

[ghost]

Hi!

I'm trying to use the WeekCalendar Component, but for some reason the dates and headers doesn't align.

<CalendarProvider date={new Date().toISOString()}> <WeekCalendar onDayPress={(day) => console.log(day)} firstDay={1} pagingEnabled={false}/> </CalendarProvider>

[Leozerassauro]

I'm having the same issue and my calendar is showing 8 days on the same row

[ahmed-abdelkader-00]

I'm also having this issue

If anybody managed to solve this problem please share with us the solution

[Hammad2410]

same issue a help would be appreciated

[albertpco]

I solved this but am working on the scrolling aspect (like why is there a blank space period). You need to set the calendarWidth={calendarWidth} within the weekcalendar. The issue is that the day names (monday etc.) take the sizing of the view its in or the page it is in. The dates take the screensize if calendarwidth is not specified.

This is how I calculated mine if anyone is curious on an easy snippet of code:

const screenWidth = Dimensions.get('window').width; const padding = 0.052 * screenWidth; // 6% of the screen width const calendarWidth = screenWidth * 0.96 - 2 * padding; // subtract padding from both sides

[MadJohnny]

I had the same issue with the Calendar component. I was able to resolve by using the alignContent property of the Calendar's style.

<View style={globalStyles.calendarContainer}>
      <Calendar
        style={{
          alignContent: "center",
        }}
        markingType={'multi-dot'}
        markedDates={{
          '2023-08-23': { selected: true, selectedColor: seaBlueColor },
          '2023-08-26': { dots: [massage, workout] }
        }}
        onDayPress={day => { setSelectedDate(day.dateString) }}
      />
</View>

[martenjurgens]

Any updates on this? Couldn't get it to work with the previously mentioned fixes.

[tran-simon]

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>
  );
};

[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.

[ramzanbilal]

I was facing the same issue in version 1.1312.0, and the solution provided by @tran-simon worked perfectly. Just a heads up: make sure to apply the onLayout handler to the View that directly wraps your calendar component, not any outer or parent view — that made the difference for me.

Thanks for the helpful solution! 🙌

[MisterCommit]

key={width} // Force rerendering the calendar on width change calendarWidth={width}

work for me

`import dayjs from "dayjs"; import React, {useState} from "react"; import {CalendarProvider, WeekCalendar} from "react-native-calendars";

import {useTheme} from "@hooks/useTheme"; import {View} from "react-native";

export interface ICalendarStripProps { markedDates?: string[]; selectedDate?: string; onDateChanged?: (date: string) => void; }

export function CalendarStrip({ markedDates, selectedDate, onDateChanged, }: ICalendarStripProps): JSX.Element { const {theme} = useTheme(); const [width, setWidth] = useState(); return ( <View onLayout={e => setWidth(e.nativeEvent.layout.width)}> <CalendarProvider key={width} // Force rerendering the calendar on width change date={selectedDate || dayjs().format("YYYY-MM-DD")} onDateChanged={newDate => { onDateChanged?.(newDate); }} style={{ maxHeight: 80, // marginHorizontal: -10, margin: 0, }} accessibilityRole="tablist" accessibilityLabel="Calendar" accessibilityHint="Select a date" > <WeekCalendar calendarWidth={width} testID="calendar-strip" theme={{ calendarBackground: theme.colors.backgroundPrimary, selectedDayBackgroundColor: theme.colors.primary, selectedDayTextColor: "#ffffff", dayTextColor: theme.colors.primary, textDisabledColor: theme.colors.labelPrimary, dotColor: theme.colors.primary, dotStyle: {marginTop: 10}, contentStyle: { backgroundColor: "red", }, }} accessibilityRole="tab" accessibilityLabel="Week Calendar" accessibilityHint="Select a date" allowShadow={false} minDate={dayjs().format("YYYY-MM-DD")} firstDay={dayjs().day()} markedDates={markedDates?.reduce((acc, date) => { acc[dayjs(date).format("YYYY-MM-DD")] = {marked: true}; return acc; }, {} as {[key: string]: {marked: boolean}})} /> </CalendarProvider> </View> ); } `