React Native Calendar Period Marking with Full Round Corners

Question

please refer to the below calendar image.

i used react-native-calendars npm library and now i want to achieve it as above.

please ignore the dots marking only consider start and end date with period marking

however i achieved only half cornered start and end date with period marking. please refer to the below image.

now i need to fully round the start and end date with react-native-calendars. anyone please help me for achieve this. is it possible with this library? or is there any react native related library to achieve this?

Answer 1

finally found a solution. but have to modify the node modules, so remember to add the changes to read me. then others can also use those.

go to the this file. node_modules/react-native-calendars/src/calendar/day/period/index.js

comment below lines.

filters = (
....
)

add below lines.

        const customStyles = {
        dayStyles: {backgroundColor: '#BEB1D7',width: 20,height: 
          26,position:'absolute'}
       }
       fillers = (
        <View style={[this.style.fillers, fillerStyle]}>
          {this.props.marking.endingDay ?<View style={customStyles.dayStyles}></View> 
          : null}

          <View style={[this.style.leftFiller, leftFillerStyle]}/>
          <View style={[this.style.rightFiller, rightFillerStyle]}/>

          {this.props.marking.startingDay ?<View style={[customStyles.dayStyles, 
           {marginLeft: 15}]}></View> : null}
        </View>
      );

note that customStyles you can edit.

the node_modules related phases now finish.

now move to your calendar component and override the styles of original calendar using their advanced styling guide. i did as mentioned below.

calendarTheme = { 
         'stylesheet.day.period': {
            wrapper: {
                alignItems: 'center',
                alignSelf: 'stretch',
                marginLeft: -2,
                borderRadius: 2,
                overflow: 'hidden'
            },
            leftFiller: {
                height: 26,
                flex: 1,
                marginLeft: 50
            }
        }
}

Answer 2

Use this library.It has the UI that you want and doesn't slow as react-native-calendars on Android.