diff --git a/README.md b/README.md index 67cd300..78343f5 100644 --- a/README.md +++ b/README.md @@ -326,6 +326,7 @@ AppRegistry.registerComponent('Example', () => Example); | **`styleWeekend`** | Whether to style weekend dates separately. | Bool | **`True`** | | **`highlightDateNameStyle`** | Style for the selected name of the day in dates strip. | Any | | **`highlightDateNumberStyle`** | Style for the selected number of the day in dates strip. | Any | +| **`highlightDateContainerStyle`** | Style for the selected date container. | Object | | **`disabledDateNameStyle`** | Style for disabled name of the day in dates strip (controlled by datesWhitelist & datesBlacklist). | Any | | **`disabledDateNumberStyle`** | Style for disabled number of the day in dates strip (controlled by datesWhitelist & datesBlacklist). | Any | | **`markedDatesStyle`** | Style for the marked dates marker. | Object | diff --git a/example/App.js b/example/App.js index f32f17a..ebd8de5 100644 --- a/example/App.js +++ b/example/App.js @@ -83,6 +83,7 @@ export default class App extends Component<{}> { dateNameStyle={{color: 'white'}} iconContainer={{flex: 0.1}} customDatesStyles={this.state.customDatesStyles} + highlightDateContainerStyle={{backgroundColor: 'black'}} markedDates={this.state.markedDates} datesBlacklist={this.datesBlacklistFunc} onDateSelected={this.onDateSelected} diff --git a/src/CalendarDay.js b/src/CalendarDay.js index 4813ba9..79d4bfd 100644 --- a/src/CalendarDay.js +++ b/src/CalendarDay.js @@ -363,6 +363,7 @@ class CalendarDay extends Component { daySelectionAnimation, highlightDateNameStyle, highlightDateNumberStyle, + highlightDateContainerStyle, styleWeekend, weekendDateNameStyle, weekendDateNumberStyle, @@ -398,7 +399,7 @@ class CalendarDay extends Component { _customHighlightDateNameStyle = customStyle.highlightDateNameStyle; _customHighlightDateNumberStyle = customStyle.highlightDateNumberStyle; } - if (enabled && selected) { + if (enabled) { // Enabled state //The user can disable animation, so that is why I use selection type //If it is background, the user have to input colors for animation @@ -433,6 +434,7 @@ class CalendarDay extends Component { ]; } if (selected) { + _dateViewStyle.push(highlightDateContainerStyle); _dateNameStyle = [ styles.dateName, highlightDateNameStyle, diff --git a/src/CalendarStrip.js b/src/CalendarStrip.js index b87d436..b425faa 100644 --- a/src/CalendarStrip.js +++ b/src/CalendarStrip.js @@ -80,6 +80,7 @@ class CalendarStrip extends Component { weekendDateNumberStyle: PropTypes.any, highlightDateNameStyle: PropTypes.any, highlightDateNumberStyle: PropTypes.any, + highlightDateContainerStyle: PropTypes.any, disabledDateNameStyle: PropTypes.any, disabledDateNumberStyle: PropTypes.any, markedDatesStyle: PropTypes.object, @@ -423,6 +424,7 @@ class CalendarStrip extends Component { weekendDateNumberStyle: this.props.weekendDateNumberStyle, highlightDateNameStyle: this.props.highlightDateNameStyle, highlightDateNumberStyle: this.props.highlightDateNumberStyle, + highlightDateContainerStyle: this.props.highlightDateContainerStyle, disabledDateNameStyle: this.props.disabledDateNameStyle, disabledDateNumberStyle: this.props.disabledDateNumberStyle, markedDatesStyle: this.props.markedDatesStyle,