Add prop highlightDateContainerStyle (#259, #261)

Also fix weekend styling (was only applying if selected). Co-authored-by: Döngölő Zsolt <[email protected]>
BugiDev · Jan 18, 2021 · 49ecc6f · 49ecc6f
1 parent 8ea9452
commit 49ecc6f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,