diff --git a/components/Calendar.js b/components/Calendar.js index d922bfa..f770dba 100644 --- a/components/Calendar.js +++ b/components/Calendar.js @@ -57,6 +57,7 @@ export default class Calendar extends Component { selectedDate: PropTypes.any, showControls: PropTypes.bool, showEventIndicators: PropTypes.bool, + showFillerDays: PropTypes.bool, startDate: PropTypes.any, titleFormat: PropTypes.string, today: PropTypes.any, @@ -76,6 +77,7 @@ export default class Calendar extends Component { scrollEnabled: false, showControls: false, showEventIndicators: false, + showFillerDays: false, startDate: moment().format('YYYY-MM-DD'), titleFormat: 'MMMM YYYY', weekStart: 1, @@ -279,6 +281,9 @@ export default class Calendar extends Component { key: renderIndex, filler: true, customStyle: this.props.customStyle, + caption: thisMoment.format('D'), + showFillerDays: this.props.showFillerDays, + showEventIndicators: this.props.showEventIndicators, }) ); } diff --git a/components/Day.js b/components/Day.js index 81f3b1f..30fc4d9 100644 --- a/components/Day.js +++ b/components/Day.js @@ -27,6 +27,7 @@ export default class Day extends Component { onPress: PropTypes.func, onLongPress: PropTypes.func, showEventIndicators: PropTypes.bool, + showFillerDays: PropTypes.bool, } dayCircleStyle = (isWeekend, isSelected, isToday, event) => { @@ -90,6 +91,7 @@ export default class Day extends Component { let { caption, customStyle } = this.props; const { filler, + showFillerDays, event, isWeekend, isSelected, @@ -105,11 +107,20 @@ export default class Day extends Component { dayButtonFillerStyle = [styles.dayButtonFiller, customStyle.dayButtonFiller, {width: dayWidth}]; } + if (showFillerDays) { + dayButtonFillerStyle.unshift(styles.dayButton); + } + return filler ? ( - + {showFillerDays && + + {caption} + + } + {showEventIndicators && } ) diff --git a/components/styles.js b/components/styles.js index 6033de0..5a2b052 100644 --- a/components/styles.js +++ b/components/styles.js @@ -61,6 +61,9 @@ const styles = StyleSheet.create({ fontSize: 16, alignSelf: 'center', }, + fillerDay: { + color: '#cccccc', + }, eventIndicatorFiller: { marginTop: 3, borderColor: 'transparent', diff --git a/example/App.js b/example/App.js index b327350..43cc996 100644 --- a/example/App.js +++ b/example/App.js @@ -56,6 +56,7 @@ class App extends Component { console.log('onSwipePrev: ', e)} onSwipeNext={(e) => console.log('onSwipeNext', e)} selectedDate={this.state.selectedDate} - showEventIndicators={true} + showEventIndicators /> Selected Date: {moment(this.state.selectedDate).format('MMMM DD YYYY')}