Custom style for separator between customer day cells.

[Cicko]

Hi there!

I am trying to achieve this design:

But when I use a custom dayComponent I don't know how to set the style of the spaces between the days, to set the correct background color. Maybe am I taking a wrong approach?

Currently it looks like this:

Regarding the code (the important parts) basically looks like this:

import { CalendarList } from "react-native-calendars";

export const RangeDateTimePicker: React.FC<RangeDateTimePickerProps> = ({

    const markedDates = useMemo(() => {
        if (!selectedFrom || !selectedTo) {
            return {};
        }

        const range = eachDayOfInterval({
            start: selectedFrom,
            end: selectedTo,
        });

        const marked = range.reduce(
            (acc, date, index) => {
                const dateString = transformDateToMarkedDateString(date);

                acc[dateString] = {
                    type: "period",
                    selected: true,
                    textColor: "black",
                    startingDay: index === 0,
                    endingDay: index === range.length - 1,
                };

                return acc;
            },
            {} as Record<string, MarkingProps>,
        );

        return marked;
    }, [selectedFrom, selectedTo]);

    const dayCellRenderer = useCallback(
        ({
            date,
            state,
            marking,
        }: DayProps & {
            date?: DateData | undefined;
        }) => <DayCell date={date} state={state} marking={marking} onDayPress={onDayPress} />,
        [],
    );

    const itemSeparatorRenderer = useCallback(
        ({
            date,
            state,
            marking,
        }: DayProps & {
            date?: DateData | undefined;
         // This item simply sets the background to blue
        }) => <ItemSeparator date={date} state={state} marking={marking}  />,
        [],
    );

  return (
    <CalendarList
        markingType="period"
        minDate={minDate && minDate.toISOString()}
        pastScrollRange={pastScrollRange}
        futureScrollRange={18}
        markedDates={markedDates}
        hideDayNames={true}
        maxToRenderPerBatch={1}
        initialNumToRender={2}
        style={styles.calendar}
        calendarStyle={styles.calendarStyle}
        theme={{
            monthTextColor: theme.colors.typography,
            dayTextColor: "transparent",
            textSectionTitleColor: "#b6c1cd",
        }}
        dayComponent={dayCellRenderer}
        // This component is not rendered :(
        ItemSeparatorComponent={itemSeparatorRenderer}
    />
  );

}

[carlgrob5171989]

@Cicko Did you resolve the UI layout issue in react-native-calendar?
I also want to make the same UI. but i am not able to do it in current react-native-calenar.
Can you guide me?