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')}