How to set color for calender selected date range background

Question

Hi I am trying to achieve the UI using react-native-calenders as shown below

the image of the design

using react native calendars I have achieved this

so far this is what I have achieved

<Calendar
    style={{
      marginTop: normalize(-20),
    }}
    minDate={Date()}
    monthFormat={'MMMM yyyy'}
    markingType={ 'custom'}
    markedDates={{
      '2023-08-28': {
        customStyles: {
          container: {
            flex: 1,
            backgroundColor: colors.borderColor,
            borderRadius: 0,
          },
          text: {color: colors.primary},
        },
      },
      '2023-08-29': {
        customStyles: {
          container: {
            flex: 1,
            backgroundColor: colors.borderColor,
            borderRadius: 0,
          },
          text: {color: colors.primary},
        },
      },
      '2023-08-30': {
        endingDay: true,
        customContainerStyle: {
          backgroundColor: 'red',
        },
        customStyles: {
          container: {
            backgroundColor: colors.primary,
            width: '70%',
            borderBlockColor: 'green',
          },
          text: {color: 'white'},
        },
      },
      '2023-08-27': {
        startingDay: true,
        customStyles: {
          container: {
            backgroundColor: colors.primary,
            width: '70%',
            borderRadius: 50,
          },
          text: {color: 'white'},
        },
      },
    }}
    hideExtraDays={true}
    onDayPress={day => {}}
    theme={theme}
  />

The above is the code used to populate UI achieved in second UI. Am not sure how to set lightBlue color to whole range.

EDIT 1

Reference library link react-native-calendars

Answer 1

You'll want to use the dayComponent attribute to conditionally render your days like this:

<Calendar
  horizontal={true}
  style={[styles.calendar]}
  markedDates={this.state.markedDates}
  minDate={todayDateString}
  current={this.state.selectedMonth}
  dayComponent={({date, state, marking}) => {
    let color = "black";
    let parent = [];
    if (state != "disabled") {
        if (!!marking && !!marking.color) {
            if (marking.startingDay && marking.endingDay) {
                parent.push(
                    <View style={{backgroundColor: "#ab5cf7", width: "100%",  height: 40, borderRadius: 20, alignContent: "center"}}>
                        <TouchableHighlight
                            onPress={()=>{
                                this.onDayPress(date)
                            }}
                        >
                            <View style={{width: "100%", height: 40, borderRadius: 20, paddingTop: 6}}>
                                <Text style={{textAlign: 'center', color: marking.textColor, fontWeight: "600"}}>{date.day}</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                )
            } else if (marking.startingDay) {
                parent.push(
                    <View style={{backgroundColor: "#ab5cf7", width: "100%",  height: 40, borderTopLeftRadius: 20, borderBottomLeftRadius: 20, alignContent: "center"}}>
                        <TouchableHighlight
                            onPress={()=>{
                                this.onDayPress(date)
                            }}
                        >
                            <View style={{width: "100%", height: 40, paddingTop: 6}}>
                                <Text style={{textAlign: 'center', color: marking.textColor, fontWeight: "600"}}>{date.day}</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                )
            } else if (marking.endingDay) {
                parent.push(
                    <View style={{backgroundColor: "#53a4e8", width: "100%",  height: 40, borderTopRightRadius: 20, borderBottomRightRadius: 20}}>
                        <TouchableHighlight
                            onPress={()=>{
                                this.onDayPress(date)
                            }}
                        >
                            <View style={{ width: "100%", height: 40, paddingTop: 6}}>
                                <Text style={{textAlign: 'center', color: marking.textColor, fontWeight: "600"}}>{date.day}</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                )
            } else {
                parent.push(
                    <View style={{backgroundColor: "#5d51ef", width: "100%", alignContent: "center"}}>
                        <TouchableHighlight
                            onPress={()=>{
                                this.onDayPress(date)
                            }}
                        >
                            <View style={{width: "100%", height: 40, paddingTop: 6}}>
                                <Text style={{textAlign: 'center', color: marking.textColor, fontWeight: "600"}}>{date.day}</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                )
            }
        } else {
            parent.push(
                <View>
                    <TouchableHighlight
                        onPress={()=>{
                            this.onDayPress(date)
                        }}
                    >
                            <View style={{width: 40, height: 40}}>
                            <Text style={{textAlign: 'center', color: color, fontWeight: "600"}}>{date.day}</Text>
                        </View>
                    </TouchableHighlight>
                </View>
            )
        }                    
    } 
    return (parent);
  }}
/>

Heres the documentation about the dayComponent