Add prop dayComponentHeight to customize day height (#273)

BugiDev · Feb 11, 2021 · d0e169f · d0e169f
1 parent 120e595
commit d0e169f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -415,6 +415,7 @@ This prop may be passed an array of style objects or a callback which receives a
 | **`maxDayComponentSize`**    | Maximum size that CalendarDay will responsively size up to.                                                                                          | Number | **`80`** |
 | **`minDayComponentSize`**    | Minimum size that CalendarDay will responsively size down to.                                                                                        | Number | **`10`** |
 | **`responsiveSizingOffset`** | Adjust the responsive sizing. May be positive (increase size) or negative (decrease size). This value is added to the calculated day component width | Number | **`0`**  |
+| **`dayComponentHeight`**     | Fixed height for the CalendarDay component or custom `dayComponent`.                                                                                 | Number |          |
 
 #### Icon Sizing
 

diff --git a/example/App.js b/example/App.js
@@ -83,6 +83,8 @@ export default class App extends Component<{}> {
           dateNameStyle={{color: 'white'}}
           iconContainer={{flex: 0.1}}
           customDatesStyles={this.state.customDatesStyles}
+          highlightDateNameStyle={{color: 'white'}}
+          highlightDateNumberStyle={{color: 'yellow'}}
           highlightDateContainerStyle={{backgroundColor: 'black'}}
           markedDates={this.state.markedDates}
           datesBlacklist={this.datesBlacklistFunc}

diff --git a/index.d.ts b/index.d.ts
@@ -106,6 +106,7 @@ interface CalendarStripProps {
   maxDayComponentSize?: number;
   minDayComponentSize?: number;
   responsiveSizingOffset?: number;
+  dayComponentHeight?: number;
 
   calendarHeaderContainerStyle?: StyleProp<ViewStyle>;
   calendarHeaderStyle?: StyleProp<TextStyle>;

diff --git a/src/CalendarDay.js b/src/CalendarDay.js
@@ -24,7 +24,9 @@ class CalendarDay extends Component {
     showDayNumber: PropTypes.bool,
 
     calendarColor: PropTypes.string,
-    size: PropTypes.number,
+
+    width: PropTypes.number,
+    height: PropTypes.number,
 
     dateNameStyle: PropTypes.any,
     dateNumberStyle: PropTypes.any,
@@ -123,7 +125,7 @@ class CalendarDay extends Component {
       doStateUpdate = true;
     }
 
-    if (prevProps.size !== this.props.size) {
+    if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
       newState = { ...newState, ...this.calcSizes(this.props) };
       doStateUpdate = true;
     }
@@ -153,10 +155,11 @@ class CalendarDay extends Component {
 
   calcSizes = props => {
     return {
-      containerSize: Math.round(props.size),
-      containerBorderRadius: Math.round(props.size / 2),
-      dateNameFontSize: Math.round(props.size / 5),
-      dateNumberFontSize: Math.round(props.size / 2.9)
+      containerWidth: Math.round(props.width),
+      containerHeight: Math.round(props.height),
+      containerBorderRadius: Math.round(props.width / 2),
+      dateNameFontSize: Math.round(props.width / 5),
+      dateNumberFontSize: Math.round(props.width / 2.9)
     };
   }
 
@@ -331,7 +334,7 @@ class CalendarDay extends Component {
       .filter(d => (d && d.color))
       .map((line, index) => {
         const backgroundColor = this.state.selected && line.selectedColor ? line.selectedColor : line.color;
-        const width = this.props.size * 0.6;
+        const width = this.props.width * 0.6;
         return (
           <View
             key={line.key ? line.key : index}
@@ -380,7 +383,8 @@ class CalendarDay extends Component {
     const {
       enabled,
       selected,
-      containerSize,
+      containerHeight,
+      containerWidth,
       containerBorderRadius,
       customStyle,
       dateNameFontSize,
@@ -453,8 +457,8 @@ class CalendarDay extends Component {
     }
 
     let responsiveDateContainerStyle = {
-      width: containerSize,
-      height: containerSize,
+      width: containerWidth,
+      height: containerHeight,
       borderRadius: containerBorderRadius,
     };
 

diff --git a/src/CalendarStrip.js b/src/CalendarStrip.js
@@ -61,6 +61,7 @@ class CalendarStrip extends Component {
 
     maxDayComponentSize: PropTypes.number,
     minDayComponentSize: PropTypes.number,
+    dayComponentHeight: PropTypes.number,
     responsiveSizingOffset: PropTypes.number,
 
     calendarHeaderContainerStyle: PropTypes.any,
@@ -365,6 +366,7 @@ class CalendarStrip extends Component {
       showMonth,
       showDate,
       scrollable,
+      dayComponentHeight,
     } = this.props;
     let csWidth = PixelRatio.roundToNearestPixel(layout.width);
     let dayComponentWidth = csWidth / numDaysInWeek + responsiveSizingOffset;
@@ -381,11 +383,12 @@ class CalendarStrip extends Component {
     let monthFontSize = Math.round(dayComponentWidth / 3.2);
     let selectorSize = Math.round(dayComponentWidth / 2.5);
     let height = showMonth ? monthFontSize : 0;
-    height += showDate ? dayComponentWidth : 0; // assume square element sizes
+    height += showDate ? dayComponentHeight || dayComponentWidth : 0;
     selectorSize = Math.min(selectorSize, height);
 
     this.setState({
       dayComponentWidth,
+      dayComponentHeight: dayComponentHeight || dayComponentWidth,
       height,
       monthFontSize,
       selectorSize,
@@ -438,7 +441,8 @@ class CalendarStrip extends Component {
       useNativeDriver: this.props.useNativeDriver,
       customDatesStyles: this.props.customDatesStyles,
       markedDates: this.props.markedDates,
-      size: this.state.dayComponentWidth,
+      height: this.state.dayComponentHeight,
+      width: this.state.dayComponentWidth,
       marginHorizontal: this.state.marginHorizontal,
       allowDayTextScaling: this.props.shouldAllowFontScaling,
     }

diff --git a/src/Scroller.js b/src/Scroller.js
@@ -37,13 +37,12 @@ export default class CalendarScroller extends Component {
     this.timeoutResetPositionId = null;
 
     this.updateLayout = renderDayParams => {
-      const itemHeight = renderDayParams.size;
-      const itemWidth = itemHeight + renderDayParams.marginHorizontal * 2;
+      const itemHeight = renderDayParams.height;
+      const itemWidth = renderDayParams.width + renderDayParams.marginHorizontal * 2;
 
       const layoutProvider = new LayoutProvider(
         index => 0, // only 1 view type
         (type, dim) => {
-          // Square, plus horizontal margin
           dim.width = itemWidth;
           dim.height = itemHeight;
         }
@@ -82,7 +81,7 @@ export default class CalendarScroller extends Component {
     let newState = {};
     let updateState = false;
 
-    if (this.props.renderDayParams.size !== prevProps.renderDayParams.size) {
+    if (this.props.renderDayParams.width !== prevProps.renderDayParams.width || this.props.renderDayParams.height !== prevProps.renderDayParams.height) {
       updateState = true;
       newState = this.updateLayout(this.props.renderDayParams);
     }