How to add different colors for startdate and enddate when enable range selection

[kobagapu]

onDateChange(date, type) {
if (type === 'END_DATE') {
this.setState({
selectedEndDate: date,
});
} else {
this.setState({
selectedStartDate: date,
selectedEndDate: date,
});
}
}

<CalendarPicker
dayLabelsWrapper = {{borderTopWidth:0}}
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
weekdays={['S', 'M', 'T', 'W', 'T', 'F', 'Sat']}
maxDate={maxDate}
//previousTitle=" <"
//nextTitle="> "
previousTitleStyle={{ marginLeft: 30, fontSize: 30 }}
//customDatesStyles={customDatesStyles}
nextTitleStyle = {{fontSize: 30,marginRight:30}}
todayBackgroundColor={'#E9EFF4'}
selectedDayColor={'#E9EFF4'}
selectedDayTextColor="#242E42"
scaleFactor={450}
width={450}
allowBackwardRangeSelect = {true}
textStyle={{
fontFamily: Fonts.latoMedium,
color: '#242E42',
}}
onDateChange={this.onDateChange}
/>

[kobagapu]

Screen.Recording.2020-12-24.at.3.00.49.PM.mov

[peacechen]

Try passing styles to these props:

selectedRangeStartStyle | ViewStyle | Optional. Style for range selected start day.
selectedRangeEndStyle | ViewStyle | Optional. Style for range selected end day.
selectedRangeStyle | ViewStyle | Optional. Style for all days in range selection.

[kobagapu]

Thanks @peacechen its working but is there any prop? changing text color in selectedRangeStartStyle and selectedRangeEndStyle

selectedRangeStartStyle = {{ backgroundColor: '#3A61A8'}}

[peacechen]

Try the prop selectedDayTextStyle

[kobagapu]

Try the prop selectedDayTextStyle

No its not working it does not change text color in selectedRangeStartStyle

selectedRangeStartStyle = {{ backgroundColor: Colors.themePrimary,selectedDayTextStyle:'#fff'}}

[peacechen]

That looks like a bug due to the order of styles in the array.

CalendarPicker/CalendarPicker/Day.js

Line 160 in b93ae2e

selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel];

If you have time, please submit a PR that moves propSelectedDayTextStyle to the end. It should look like this on the 7 lines that use it:

          selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];

[peacechen]

Published in 7.0.7
Happy New Year 🎆

[kobagapu]

Thanks @peacechen
<CalendarPicker
dayLabelsWrapper = {{borderTopWidth:0}}
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
weekdays={['S', 'M', 'T', 'W', 'T', 'F', 'Sat']}
maxDate={maxDate}
previousTitle=" <"
nextTitle="> "
previousTitleStyle={{ marginLeft: 30, fontSize: 30 }}
//customDatesStyles={customDatesStyles}
nextTitleStyle = {{fontSize: 30,marginRight:30}}
todayBackgroundColor={'#E9EFF4'}
selectedDayColor={'#E9EFF4'}
selectedDayTextColor="#242E42"
//scaleFactor={400}
width={450}
height = {350}
allowBackwardRangeSelect={true}
selectedRangeStartStyle = {{ backgroundColor: Colors.themePrimary,selectedDayTextColor:'white'}}
selectedRangeEndStyle={{ backgroundColor: Colors.themePrimary}}
textStyle={{
fontFamily: Fonts.latoMedium,
color: '#242E42',
}}
onDateChange={this.onDateChange}
/>
its not working when add this prop selectedDayTextColor:'white'

[peacechen]

Pass a style to selectedDayTextStyle. It's a separate prop.

[kobagapu]

@peacechen selectedDayTextStyle pass it changes all selected days but i want to change selectedRangeStartStyle and selectedRangeEndStyle

[peacechen]

I see what you mean. selectedRangeStartStyle applies to the container View, not the Text within it, so it's unable to change the text color. New props selectedRangeStartTextStyle and selectedRangeEndTextStyle will need to be added. Please submit a PR that adds them.

[kobagapu]

#261 (comment)

[peacechen]

The new props have been published in 7.0.8

I recommend that you learn how to submit Pull Requests (PR) to contribute to this library. You wouldn't need to wait around for someone else to make the change for you.

[kobagapu]

Thank you @peacechen