diff --git a/README.md b/README.md index 4c918ff..e616f16 100644 --- 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 index ebd8de5..206c2eb 100644 --- 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 index c0efcd1..6b44d2c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -106,6 +106,7 @@ interface CalendarStripProps { maxDayComponentSize?: number; minDayComponentSize?: number; responsiveSizingOffset?: number; + dayComponentHeight?: number; calendarHeaderContainerStyle?: StyleProp; calendarHeaderStyle?: StyleProp; diff --git a/src/CalendarDay.js b/src/CalendarDay.js index 40ebf98..775687b 100644 --- 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 ( { - 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); }