diff --git a/README.md b/README.md index b3b132f..a1c0db9 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ yarn add react-native-month-selector | containerStyle | ViewStyle | null | custom style for the container | | yearTextStyle | TextStyle | null | custom style for the year text | | monthTextStyle | TextStyle | null | custom style of the text for the months | +| monthWidth | number | 40 | custom width and height for months. BorderRadius will be adjusted | currentMonthTextStyle | TextStyle | null | custom style for the current month text | | initialView | moment.Moment | moment() | which month should be selected initially | | onMonthTapped | (month: moment.Moment) => any | (month) => {} | function called when month is pressed | diff --git a/src/MonthSelector.tsx b/src/MonthSelector.tsx index 0d3ff84..2b5d9c0 100644 --- a/src/MonthSelector.tsx +++ b/src/MonthSelector.tsx @@ -43,6 +43,7 @@ interface MonthSelectorProps { yearTextStyle: TextStyle monthTextStyle: TextStyle currentMonthTextStyle: TextStyle + monthWidth: number monthFormat: string initialView: moment.Moment onMonthTapped: (month: moment.Moment) => any @@ -82,6 +83,7 @@ class MonthSelector extends React.Component< monthTextStyle: PropTypes.any, currentMonthTextStyle: PropTypes.any, monthFormat: PropTypes.string, + monthWidth: PropTypes.number, initialView: PropTypes.any, onMonthTapped: PropTypes.func, onYearChanged: PropTypes.func, @@ -114,6 +116,7 @@ class MonthSelector extends React.Component< color: "#22ee11", }, monthTextStyle: { color: "#000" }, + monthWidth: 40, initialView: moment(), onMonthTapped: month => {}, onYearChanged: year => {}, @@ -162,12 +165,26 @@ class MonthSelector extends React.Component< return {} } + getSelectedMonthWidth() { + if (this.props.monthWidth) { + return { + height: this.props.monthWidth, + width: this.props.monthWidth, + borderRadius: this.props.monthWidth /2, + } + } + else { + return {}; + } +} + getMonthActualComponent(month: moment.Moment, isDisabled: boolean = false) { return (