From e62db09727259a790e9b4368c1410dedce51c642 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Thu, 20 Jul 2017 02:31:56 +0200
Subject: [PATCH 1/7] :globe_with_meridians: I18N - Support for custom month
 names. Set only "en" as default language

---
 Calendar.js    | 66 +++++++++++++++-----------------------------------
 Month/index.js | 32 +++++++++---------------
 index.ios.js   | 17 +++++++------
 3 files changed, 41 insertions(+), 74 deletions(-)

diff --git a/Calendar.js b/Calendar.js
index 8eff679..451c904 100644
--- a/Calendar.js
+++ b/Calendar.js
@@ -21,7 +21,6 @@ const ICON = {
 };
 export default class Calendar extends Component {
   static propTypes = {
-    i18n: PropTypes.string,
     format: PropTypes.string,
     customI18n: PropTypes.object,
     color: PropTypes.object,
@@ -30,47 +29,20 @@ export default class Calendar extends Component {
   }
   static defaultProps = {
     format: 'YYYY-MM-DD',
-    i18n: 'en',
     customI18n: {},
     color: {}
   }
-  static I18N_MAP = {
-    'zh': {
-      'w': ['', '一', '二', '三', '四', '五', '六', '日'],
-      'weekday': ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
-      'text': {
-        'start': '开 始',
-        'end': '结 束',
-        'date': '日 期',
-        'save': '保 存',
-        'clear': '清除'
-      },
-      'date': 'M月D日'
+  static DEFAULT_I18N_MAP = {
+    'w': ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+    'weekday': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+    'text': {
+      'start': 'Start',
+      'end': 'End',
+      'date': 'Date',
+      'save': 'Save',
+      'clear': 'Reset'
     },
-    'en': {
-      'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
-      'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-      'text': {
-        'start': 'Start',
-        'end': 'End',
-        'date': 'Date',
-        'save': 'Save',
-        'clear': 'Reset'
-      },
-      'date': 'DD / MM'
-    },
-    'jp': {
-      'w': ['', '月', '火', '水', '木', '金', '土', '日'],
-      'weekday': ['', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
-      'text': {
-        'start': 'スタート',
-        'end': 'エンド',
-        'date': '時　間',
-        'save': '確　認',
-        'clear': 'クリア'
-      },
-      'date': 'M月D日'
-    }
+    'date': 'DD / MM'
   }
   constructor (props) {
     super(props);
@@ -95,14 +67,13 @@ export default class Calendar extends Component {
   }
   _i18n (data, type) {
     const {
-      i18n,
       customI18n
     } = this.props;
     if (~['w', 'weekday', 'text'].indexOf(type)) {
-      return (customI18n[type] || {})[data] || Calendar.I18N_MAP[i18n][type][data];
+      return (customI18n[type] || {})[data] || Calendar.DEFAULT_I18N_MAP[type][data];
     }
     if (type === 'date') {
-      return data.format(customI18n[type] || Calendar.I18N_MAP[i18n][type]);
+      return data.format(customI18n[type] || Calendar.DEFAULT_I18N_MAP[type]);
     }
   }
   _resetCalendar () {
@@ -118,12 +89,15 @@ export default class Calendar extends Component {
     this.setState({
       startDate: isStartValid ? start : null,
       startDateText: isStartValid ? this._i18n(start, 'date') : '',
-      startWeekdayText: isStartValid ? this._i18n(start.isoWeekday(), 'weekday') : '',
+      startWeekdayText: isStartValid ? this._i18n(this._getIsoWeekdayForI18n(start), 'weekday') : '',
       endDate: isEndValid ? end: null,
       endDateText: isEndValid ? this._i18n(end, 'date') : '',
-      endWeekdayText: isEndValid ? this._i18n(end.isoWeekday(), 'weekday') : ''
+      endWeekdayText: isEndValid ? this._i18n(this._getIsoWeekdayForI18n(end), 'weekday') : ''
     });
   }
+  _getIsoWeekdayForI18n (day) {
+    return day.isoWeekday() - 1;
+  }
   _getDateRange () {
     const {
       maxDate,
@@ -158,7 +132,7 @@ export default class Calendar extends Component {
         startDate: day,
         endDate: null,
         startDateText: this._i18n(day, 'date'),
-        startWeekdayText: this._i18n(day.isoWeekday(), 'weekday'),
+        startWeekdayText: this._i18n(this._getIsoWeekdayForI18n(day), 'weekday'),
         endDateText: '',
         endWeekdayText: '',
       });
@@ -166,7 +140,7 @@ export default class Calendar extends Component {
       this.setState({
         endDate: day,
         endDateText: this._i18n(day, 'date'),
-        endWeekdayText: this._i18n(day.isoWeekday(), 'weekday')
+        endWeekdayText: this._i18n(this._getIsoWeekdayForI18n(day), 'weekday')
       });
     }
   }
@@ -285,7 +259,7 @@ export default class Calendar extends Component {
               startDate={this.state.startDate}
               endDate={this.state.endDate}
               onChoose={this._onChoose}
-              i18n={this.props.i18n}
+              customI18n={this.props.customI18n}
               color={color}
             />
           </View>
diff --git a/Month/index.js b/Month/index.js
index 141fc6f..6eb3bc2 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -20,36 +20,28 @@ export default class Month extends Component {
     this._renderDayRow = this._renderDayRow.bind(this);
     this._getMonthText = this._getMonthText.bind(this);
   }
-  static I18N_MAP = {
-    'zh': [
-      '一月', '二月', '三月', '四月', '五月', '六月',
-      '七月', '八月', '九月', '十月', '十一月', '十二月'
-    ],
-    'jp': [
-      '一月', '二月', '三月', '四月', '五月', '六月',
-      '七月', '八月', '九月', '十月', '十一月', '十二月'
-    ],
-    'en': [
-      'January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November', 'December'
-    ]
-  }
+  static DEFAULT_I18N_MONTH_NAMES = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ]
+
   _getMonthText () {
     const {
       month,
       today,
-      i18n
+      customI18n
     } = this.props;
     let y = month.year();
     let m = month.month();
     let year = today.year();
+    let monthNames = Month.DEFAULT_I18N_MONTH_NAMES;
+    if (customI18n && customI18n['m']) {
+      monthNames = customI18n['m'];
+    }
     if (year === y) {
-      return Month.I18N_MAP[i18n][m];
+      return monthNames[m] || Month.DEFAULT_I18N_MONTH_NAMES[m];
     } else {
-      if (i18n === 'en') {
-        return `${Month.I18N_MAP[i18n][m]}, ${y}`;
-      }
-      return month.format('YYYY年M月');
+      return `${monthNames[m] || Month.DEFAULT_I18N_MONTH_NAMES[m]}, ${y}`;
     }
   }
   _getDayList (date) {
diff --git a/index.ios.js b/index.ios.js
index 353665e..92d94fe 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -40,14 +40,15 @@ export default class calendar extends Component {
   render() {
     // It's an optional property, I use this to show the structure of customI18n object.
     let customI18n = {
-      'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
-      'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+      'w': ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
+      'm': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+      'weekday': ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
       'text': {
-        'start': 'Check in',
-        'end': 'Check out',
-        'date': 'Date',
-        'save': 'Confirm',
-        'clear': 'Reset'
+        'start': 'Entrada',
+        'end': 'Salida',
+        'date': 'Fecha',
+        'save': 'Confirmar',
+        'clear': 'Limpiar'
       },
       'date': 'DD / MM'  // date format
     };
@@ -74,9 +75,9 @@ export default class calendar extends Component {
           <Text style={styles.font}>{text}</Text>
         </View>
         <Calendar
-          i18n="en"
           color={color}
           ref={(calendar) => {this.calendar = calendar;}}
+          customI18n={customI18n}
           format="YYYYMMDD"
           minDate="20170510"
           maxDate="20180412"

From bbe032fc0f8b8eeac70b556c7f9afccb6473f494 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Thu, 20 Jul 2017 02:34:58 +0200
Subject: [PATCH 2/7] :package: Support custom first weekday

---
 Calendar.js    | 25 ++++++++++++++++++++++++-
 Month/index.js | 15 +++++++++++----
 index.ios.js   |  1 +
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/Calendar.js b/Calendar.js
index 451c904..f4245fe 100644
--- a/Calendar.js
+++ b/Calendar.js
@@ -33,6 +33,7 @@ export default class Calendar extends Component {
     color: {}
   }
   static DEFAULT_I18N_MAP = {
+    'firstWeekday': 7,
     'w': ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
     'weekday': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
     'text': {
@@ -55,6 +56,7 @@ export default class Calendar extends Component {
     this._getDateRange = this._getDateRange.bind(this);
     this._onChoose = this._onChoose.bind(this);
     this._resetCalendar = this._resetCalendar.bind(this);
+    this._getFirstWeekday = this._getFirstWeekday.bind(this);
     this.close = this.close.bind(this);
     this.cancel = this.cancel.bind(this);
     this.open = this.open.bind(this);
@@ -144,6 +146,26 @@ export default class Calendar extends Component {
       });
     }
   }
+  _getFirstWeekday () {
+    let defaultFirstWeekday = Calendar.DEFAULT_I18N_MAP['firstWeekday'];
+    let firstWeekday = this.props.customI18n['firstWeekday'] || defaultFirstWeekday;
+    return ((firstWeekday <= 7) ? firstWeekday : defaultFirstWeekday);
+  }
+  _getWeeknums () {
+    let firstWeekday = this._getFirstWeekday();
+    if (firstWeekday > 7) {
+      firstWeekday = Calendar.DEFAULT_I18N_MAP['firstWeekday'];;
+    }
+    let days = [];
+    for (let i = 0; i < 7; i++) {
+      days.push(firstWeekday - 1);
+      firstWeekday++;
+      if (firstWeekday > 7) {
+        firstWeekday = 1;
+      }
+    }
+    return days;
+  }
   cancel () {
     this.close();
     this._resetCalendar();
@@ -247,13 +269,14 @@ export default class Calendar extends Component {
             </View>
           </View>
           <View style={styles.week}>
-            {[7, 1, 2, 3, 4, 5, 6].map(item =>
+            {this._getWeeknums().map(item =>
               <Text style={[styles.weekText, subFontColor]}　key={item}>{this._i18n(item, 'w')}</Text>
             )}
           </View>
           <View style={[styles.scroll, {borderColor}]}>
             <MonthList
               today={this._today}
+              firstWeekday={this._getFirstWeekday()}
               minDate={this._minDate}
               maxDate={this._maxDate}
               startDate={this.state.startDate}
diff --git a/Month/index.js b/Month/index.js
index 6eb3bc2..ce04835 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -48,10 +48,17 @@ export default class Month extends Component {
     let dayList;
     let month = date.month();
     let weekday = date.isoWeekday();
-    if (weekday === 7) {
+    let firstWeekday = this.props.firstWeekday;
+    if (weekday === firstWeekday) {
       dayList = [];
     } else {
-      dayList = new Array(weekday).fill({
+      let arrayLength;
+      if (weekday > firstWeekday) {
+        arrayLength = Math.abs(weekday - firstWeekday);
+      } else {
+        arrayLength = 7 - Math.abs(weekday - firstWeekday);
+      }
+      dayList = new Array(arrayLength).fill({
         empty: date.clone().subtract(1, 'h')
       });
     }
@@ -63,12 +70,12 @@ export default class Month extends Component {
     }
     date.subtract(1, 'days');
     weekday = date.isoWeekday();
-    if (weekday === 7) {
+    if (weekday === firstWeekday) {
       return dayList.concat(new Array(6).fill({
         empty: date.clone().hour(1)
       }));
     }
-    return dayList.concat(new Array(Math.abs(weekday - 6)).fill({
+    return dayList.concat(new Array(Math.abs((weekday - firstWeekday) - 6)).fill({
       empty: date.clone().hour(1)
     }));
   }
diff --git a/index.ios.js b/index.ios.js
index 92d94fe..211d03e 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -40,6 +40,7 @@ export default class calendar extends Component {
   render() {
     // It's an optional property, I use this to show the structure of customI18n object.
     let customI18n = {
+      'firstWeekday': 1,
       'w': ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
       'm': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
       'weekday': ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],

From 342eb9bd71c0f937c928430251ae7e341f6192f7 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Thu, 20 Jul 2017 03:30:34 +0200
Subject: [PATCH 3/7] :package: Add default firstWeekday prop and update
 component tests

---
 Month/index.js             |  6 ++++++
 __tests__/Calendar.test.js | 13 +++----------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/Month/index.js b/Month/index.js
index ce04835..e97049d 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -14,6 +14,12 @@ import styles from './style';
 import Day from '../Day';
 
 export default class Month extends Component {
+  static propTypes = {
+    firstWeekday: PropTypes.number
+  }
+  static defaultProps = {
+    firstWeekday: 7
+  }
   constructor (props) {
     super(props);
     this._getDayList = this._getDayList.bind(this);
diff --git a/__tests__/Calendar.test.js b/__tests__/Calendar.test.js
index 0abc63f..3be9e02 100644
--- a/__tests__/Calendar.test.js
+++ b/__tests__/Calendar.test.js
@@ -26,7 +26,6 @@ let color = {
 
 let cal = shallow(
   <Calendar
-    i18n="en"
     ref="cal"
     format="YYYYMMDD"
     minDate="20161210"
@@ -114,7 +113,6 @@ let monthList = shallow(
     maxDate={maxDate}
     startDate={startDate}
     endDate={endDate}
-    i18n="en"
     onChoose={() => {}}
     color={color}
   />
@@ -151,7 +149,6 @@ test('It renders MonthList correctly', done => {
 
 let month = shallow(
   <Month
-    i18n="en"
     month={Moment('20170801', 'YYYYMMDD')}
     startDate={startDate}
     endDate={endDate}
@@ -164,7 +161,6 @@ let month = shallow(
 
 let monthAnotherYear = shallow(
   <Month
-    i18n="en"
     month={Moment('20180101', 'YYYYMMDD')}
     startDate={startDate}
     endDate={endDate}
@@ -177,7 +173,9 @@ let monthAnotherYear = shallow(
 
 let jpMonth = shallow(
   <Month
-    i18n="jp"
+    customI18n={{
+      'w': ['月', '火', '水', '木', '金', '土', '日'],
+    }}
     month={Moment('20180101', 'YYYYMMDD')}
     startDate={startDate}
     endDate={endDate}
@@ -203,7 +201,6 @@ let dateChoose = null;
 
 let dayOut = shallow(
   <Day
-    i18n="en"
     date={dateOut}
     startDate={startDate}
     endDate={endDate}
@@ -217,7 +214,6 @@ let dayOut = shallow(
 
 let dayStart = shallow(
   <Day
-    i18n="en"
     date={dateStart}
     startDate={startDate}
     endDate={endDate}
@@ -230,7 +226,6 @@ let dayStart = shallow(
 
 let dayEnd = shallow(
   <Day
-    i18n="en"
     date={dateEnd}
     startDate={startDate}
     endDate={endDate}
@@ -243,7 +238,6 @@ let dayEnd = shallow(
 
 let dayMid = shallow(
   <Day
-    i18n="en"
     date={dateMid}
     startDate={startDate}
     endDate={endDate}
@@ -256,7 +250,6 @@ let dayMid = shallow(
 
 let dayEmpty = shallow(
   <Day
-    i18n="en"
     date={null}
     empty={Moment('20170901', 'YYYYMMDD')}
     startDate={startDate}

From 527491a866b3e6806fd6ff0e611f3e89d6beb881 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Sun, 30 Jul 2017 02:57:26 +0200
Subject: [PATCH 4/7] :bug: Fix empty extra week

---
 Month/index.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/Month/index.js b/Month/index.js
index e97049d..48cfa3c 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -76,14 +76,23 @@ export default class Month extends Component {
     }
     date.subtract(1, 'days');
     weekday = date.isoWeekday();
+    let endList;
     if (weekday === firstWeekday) {
-      return dayList.concat(new Array(6).fill({
+      endList = new Array(6).fill({
         empty: date.clone().hour(1)
-      }));
+      });
+    } else {
+      let arrayLength;
+      if (weekday > firstWeekday) {
+        arrayLength = Math.abs((weekday - firstWeekday) - 6);
+      } else {
+        arrayLength = Math.abs(weekday - firstWeekday) - 1;
+      }
+      endList = new Array(arrayLength).fill({
+        empty: date.clone().hour(1)
+      });
     }
-    return dayList.concat(new Array(Math.abs((weekday - firstWeekday) - 6)).fill({
-      empty: date.clone().hour(1)
-    }));
+    return dayList.concat(endList);
   }
   _renderDayRow (dayList, index) {
     const {

From 9f01610c5a6f0042a24e5ac10659b79bacd597c6 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Sat, 26 Aug 2017 04:59:30 +0200
Subject: [PATCH 5/7] :lipstick: Add custom styles support

---
 Calendar.js             | 32 ++++++++++++++++++++------------
 CustomStylesProvider.js |  4 ++++
 Day/index.js            |  8 +++++---
 Month/index.js          |  6 ++++--
 index.ios.js            | 36 ++++++++++++++++++++++++++++++++++++
 5 files changed, 69 insertions(+), 17 deletions(-)
 create mode 100644 CustomStylesProvider.js

diff --git a/Calendar.js b/Calendar.js
index f4245fe..404ebc6 100644
--- a/Calendar.js
+++ b/Calendar.js
@@ -15,6 +15,7 @@ import {
 } from 'react-native';
 import Moment from 'moment';
 import styles from './CalendarStyle';
+import { customStylesProvider } from './CustomStylesProvider';
 import MonthList from './MonthList';
 const ICON = {
   close: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADGklEQVR4Xu3b3XXTMBTAcV1Leu8I3YAyAWECygSlE9BOQJmAdAK6QWGCphNQNmAE+mzZl6Mc5xzXtiLJ1r0STfLqJM3/Z9muPwTiwF9w4P3iCHAcAQ4BRDxt2/aDEOKkqqqfAPD0P2EZYy6EEJ/sbwaATVVVtwDwd9gwuQkYY+wHv9n43QcQca21vi4dARFPmqa5F0Ks+r8VEZ+UUu+HCCMAu+abpvnVj+990Z1S6rJUBBtvjHkAgLOp34iIX7XWN/1lI4Cmaa4Q0a5916tIBF+8jUHER631i5ExAqjr+gYAvnjWclEIIfHBAIh41m0CvpFeBEJofBdzqZS627sJ2IV1Xa8B4LNPQAiRFSEmfmr4b48QrkhjjJWyhxLfKwtCZPxvpdQq+DC4Ky4VIVX83hFQKkLK+CAA+6ZSRkLq+GCAEhAo4qMAciJQxUcD5ECgjJ8FwIlAHT8bgAOBI34RACUCV/xiAAoEzvgkACkRuOOTAaRAyBGfFGAJQq745ABzEHLGkwDEItgLMK5reP3zcER0ntL6ztf3LSe7MRJxAuX9/VTxZCNgxqm0E4EynhwgcnMYIVDHswDMReCIZwOIReCKZwOIOdR12wHbhVayo8Bug54Rv/soCwIpwIJ4NgQygATxLAgkAAnjyRGSA8TE27199+BFtjtQSQFi43e3qyL+bU6+Y0wGMDd+xr/NSRGSACyNz4mwGCBVfC6ERQCp43MgzAagiudGmAVAHc+JEA3AFc+FEAXAHc+BEAyQK54aIQggdzwlgheglHgqhL0ApcVTIDgBSo1PjTAJUHp8SgTXfIGH4fP2U3cuOK/euu6chJ5KI+Kt1vpq+D0jgG6yxHfnrZpuQQnxsSNBSvl2OPNl6nH5DQC82wdQUnwMAgBcSynX/bZogBLjIxA+KqV++ACcEyZKjg9AeJZSnobMGbLzbuxm8KYvZZ+3V0qdTz1y7ttfcC+fmO/wjIjnWuuNdydo39AdBu0eczu/BgDsdbgXMy24o2L/nn3wom3bFSL+kVLaFTqaMrdti/3i1/b+I8BrW6OxPQc/Av4BDSZYbnPWwJkAAAAASUVORK5CYII='
@@ -23,6 +24,7 @@ export default class Calendar extends Component {
   static propTypes = {
     format: PropTypes.string,
     customI18n: PropTypes.object,
+    customStyles: PropTypes.object,
     color: PropTypes.object,
     minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
@@ -30,6 +32,7 @@ export default class Calendar extends Component {
   static defaultProps = {
     format: 'YYYY-MM-DD',
     customI18n: {},
+    customStyles: {},
     color: {}
   }
   static DEFAULT_I18N_MAP = {
@@ -219,6 +222,10 @@ export default class Calendar extends Component {
       subColor = '#fff',
       borderColor = 'rgba(255, 255, 255, 0.50)'
     } = this.props.color;
+    const {
+      customI18n,
+      customStyles
+    } = this.props;
     let color = {mainColor, subColor, borderColor};
     let mainBack = {backgroundColor: mainColor};
     let subBack = {backgroundColor: subColor};
@@ -246,31 +253,31 @@ export default class Calendar extends Component {
               underlayColor="transparent"
               activeOpacity={0.8}
               onPress={this.clear}>
-              <Text style={[styles.clearText, subFontColor]}>{this._i18n('clear', 'text')}</Text>
+              <Text style={[styles.clearText, subFontColor, customStylesProvider(customStyles, 'clearText')]}>{this._i18n('clear', 'text')}</Text>
             </TouchableHighlight>}
           </View>
           <View style={styles.result}>
             <View style={styles.resultPart}>
-              <Text style={[styles.resultText, styles.startText, subFontColor]}>
+              <Text style={[styles.resultText, styles.startText, subFontColor, customStylesProvider(customStyles, 'selectedDate')]}>
                 {startDateText || this._i18n('start', 'text')}
               </Text>
-              <Text style={[styles.resultText, styles.startText, subFontColor]}>
+              <Text style={[styles.resultText, styles.startText, subFontColor, customStylesProvider(customStyles, 'selectedDateDayName')]}>
                 {startWeekdayText || this._i18n('date', 'text')}
               </Text>
             </View>
             <View style={[styles.resultSlash, subBack]}/>
             <View style={styles.resultPart}>
-              <Text style={[styles.resultText, styles.endText, subFontColor]}>
+              <Text style={[styles.resultText, styles.endText, subFontColor, customStylesProvider(customStyles, 'selectedDate')]}>
                 {endDateText || this._i18n('end', 'text')}
               </Text>
-              <Text style={[styles.resultText, styles.endText, subFontColor]}>
+              <Text style={[styles.resultText, styles.endText, subFontColor, customStylesProvider(customStyles, 'selectedDateDayName')]}>
                 {endWeekdayText || this._i18n('date', 'text')}
               </Text>
             </View>
           </View>
           <View style={styles.week}>
             {this._getWeeknums().map(item =>
-              <Text style={[styles.weekText, subFontColor]}　key={item}>{this._i18n(item, 'w')}</Text>
+              <Text style={[styles.weekText, subFontColor, customStylesProvider(customStyles, 'weekDay')]}　key={item}>{this._i18n(item, 'w')}</Text>
             )}
           </View>
           <View style={[styles.scroll, {borderColor}]}>
@@ -282,29 +289,30 @@ export default class Calendar extends Component {
               startDate={this.state.startDate}
               endDate={this.state.endDate}
               onChoose={this._onChoose}
-              customI18n={this.props.customI18n}
+              customI18n={customI18n}
+              customStyles={customStyles}
               color={color}
             />
           </View>
-          <View style={styles.btn}>
+          <View style={[styles.btn, customStylesProvider(customStyles, 'confirmBtnWrapper')]}>
             {isValid ?
               <TouchableHighlight
                 underlayColor="rgba(255, 255, 255, 0.45)"
-                style={styles.confirmContainer}
+                style={[styles.confirmContainer, customStylesProvider(customStyles, 'confirmBtn')]}
                 onPress={this.confirm}>
                 <View style={styles.confirmBtn}>
                   <Text
                     ellipsisMode="tail" numberOfLines={1}
-                    style={[styles.confirmText, subFontColor]}>
+                    style={[styles.confirmText, subFontColor, customStylesProvider(customStyles, 'confirmBtnText')]}>
                     {this._i18n('save', 'text')}
                   </Text>
                 </View>
               </TouchableHighlight> :
-              <View style={[styles.confirmContainer, styles.confirmContainerDisabled]}>
+              <View style={[styles.confirmContainer, styles.confirmContainerDisabled, customStylesProvider(customStyles, 'confirmBtn')]}>
                 <View style={styles.confirmBtn}>
                   <Text
                     ellipsisMode="tail" numberOfLines={1}
-                    style={[styles.confirmText, styles.confirmTextDisabled]}>
+                    style={[styles.confirmText, styles.confirmTextDisabled, customStylesProvider(customStyles, 'confirmBtnText')]}>
                     {this._i18n('save', 'text')}
                   </Text>
                 </View>
diff --git a/CustomStylesProvider.js b/CustomStylesProvider.js
new file mode 100644
index 0000000..527ff83
--- /dev/null
+++ b/CustomStylesProvider.js
@@ -0,0 +1,4 @@
+
+export const customStylesProvider = function (styles, key) {
+  return styles[key] || {};
+};
diff --git a/Day/index.js b/Day/index.js
index 74579df..0861586 100644
--- a/Day/index.js
+++ b/Day/index.js
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import Moment from 'moment';
 import styles from './style';
+import { customStylesProvider } from '../CustomStylesProvider';
 
 export default class Day extends Component {
   static propTypes = {
@@ -56,7 +57,8 @@ export default class Day extends Component {
   render () {
     const {
       date,
-      color
+      color,
+      customStyles
     } = this.props;
     let text = date ? date.date() : '';
     let mainColor = {color: color.mainColor};
@@ -77,10 +79,10 @@ export default class Day extends Component {
             style={[styles.day, this.isToday && styles.today, this.isFocus && subBack]}
             underlayColor="rgba(255, 255, 255, 0.35)"
             onPress={this._chooseDay}>
-            <Text style={[styles.dayText, subColor, this.isFocus && mainColor]}>{text}</Text>
+            <Text style={[styles.dayText, subColor, this.isFocus && mainColor, customStylesProvider(customStyles, 'validDay')]}>{text}</Text>
           </TouchableHighlight> :
           <View style={[styles.day, this.isToday && styles.today]}>
-            <Text style={styles.dayTextDisabled}>{text}</Text>
+            <Text style={[styles.dayTextDisabled, customStylesProvider(customStyles, 'invalidDay')]}>{text}</Text>
           </View>
         }
       </View>
diff --git a/Month/index.js b/Month/index.js
index 48cfa3c..a03284a 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -12,6 +12,7 @@ import {
 import Moment from 'moment';
 import styles from './style';
 import Day from '../Day';
+import { customStylesProvider } from '../CustomStylesProvider';
 
 export default class Month extends Component {
   static propTypes = {
@@ -116,7 +117,8 @@ export default class Month extends Component {
     const {
       month,
       today,
-      color
+      color,
+      customStyles
     } = this.props;
     let subColor = {color: color.subColor};
     let titleText = this._getMonthText();
@@ -125,7 +127,7 @@ export default class Month extends Component {
     return (
       <View style={styles.month}>
         <View style={styles.monthTitle}>
-          <Text style={[styles.monthTitleText, subColor]}>{titleText}</Text>
+          <Text style={[styles.monthTitleText, subColor, customStylesProvider(customStyles, 'monthName')]}>{titleText}</Text>
         </View>
         <View style={styles.days}>
           {rowArray.map((item, i) =>
diff --git a/index.ios.js b/index.ios.js
index 211d03e..1bd7d20 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -57,6 +57,41 @@ export default class calendar extends Component {
     let color = {
       mainColor: '#138691'
     };
+    // custom styles
+    let customStyles = {
+      clearText : {
+        fontFamily: 'Damascus'
+      },
+      selectedDate : {
+        fontFamily: 'Arial'
+      },
+      selectedDateDayName : {
+        fontFamily: 'Damascus'
+      },
+      weekDay : {
+        fontFamily: 'Damascus'
+      },
+      monthName : {
+        fontFamily: 'Damascus',
+        fontSize: 20
+      },
+      validDay : {
+        fontFamily: 'Arial'
+      },
+      invalidDay : {
+        fontFamily: 'Arial'
+      },
+      confirmBtnWrapper : {
+        flex : 2,
+      },
+      confirmBtn : {
+        borderRadius: 0,
+      },
+      confirmBtnText : {
+        fontFamily: 'Damascus',
+        fontWeight: 'normal'
+      }
+    };
     const {
       startDate,
       endDate
@@ -79,6 +114,7 @@ export default class calendar extends Component {
           color={color}
           ref={(calendar) => {this.calendar = calendar;}}
           customI18n={customI18n}
+          customStyles={customStyles}
           format="YYYYMMDD"
           minDate="20170510"
           maxDate="20180412"

From 9297914c4e053209abc601ec43a63bdf4546d1a8 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Sat, 26 Aug 2017 05:06:12 +0200
Subject: [PATCH 6/7] :bug: Add default customStyles prop value

---
 Day/index.js   | 6 +++++-
 Month/index.js | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Day/index.js b/Day/index.js
index 0861586..1e7619d 100644
--- a/Day/index.js
+++ b/Day/index.js
@@ -15,7 +15,11 @@ import { customStylesProvider } from '../CustomStylesProvider';
 
 export default class Day extends Component {
   static propTypes = {
-    onChoose: PropTypes.func
+    onChoose: PropTypes.func,
+    customStyles: PropTypes.object
+  }
+  static defaultProps = {
+    customStyles: {}
   }
   constructor (props) {
     super(props);
diff --git a/Month/index.js b/Month/index.js
index a03284a..eade7b4 100644
--- a/Month/index.js
+++ b/Month/index.js
@@ -16,10 +16,12 @@ import { customStylesProvider } from '../CustomStylesProvider';
 
 export default class Month extends Component {
   static propTypes = {
-    firstWeekday: PropTypes.number
+    firstWeekday: PropTypes.number,
+    customStyles: PropTypes.object
   }
   static defaultProps = {
-    firstWeekday: 7
+    firstWeekday: 7,
+    customStyles: {}
   }
   constructor (props) {
     super(props);

From 2ed1bf88c9a334520e757030e6877cc7c169ee07 Mon Sep 17 00:00:00 2001
From: Jorge Giraldez Gonzalez <jorbaiona9@gmail.com>
Date: Tue, 12 Sep 2017 00:17:07 +0200
Subject: [PATCH 7/7] :package: Add date range validator to avoid invalid
 ranges

---
 Calendar.js  | 13 +++++++++++++
 index.ios.js |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/Calendar.js b/Calendar.js
index 404ebc6..0a3ad31 100644
--- a/Calendar.js
+++ b/Calendar.js
@@ -8,6 +8,7 @@ import {
   Text,
   Modal,
   Image,
+  Alert,
   StyleSheet,
   ScrollView,
   Dimensions,
@@ -25,6 +26,7 @@ export default class Calendar extends Component {
     format: PropTypes.string,
     customI18n: PropTypes.object,
     customStyles: PropTypes.object,
+    dateRangeValidator: PropTypes.object,
     color: PropTypes.object,
     minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
@@ -33,6 +35,7 @@ export default class Calendar extends Component {
     format: 'YYYY-MM-DD',
     customI18n: {},
     customStyles: {},
+    dateRangeValidator: null,
     color: {}
   }
   static DEFAULT_I18N_MAP = {
@@ -200,6 +203,16 @@ export default class Calendar extends Component {
     } = this.state;
     let startMoment = startDate ? startDate.clone() : null;
     let endMoment = endDate ? endDate.clone() : null;
+    if (startMoment != null && endMoment != null && this.props.dateRangeValidator != null) {
+      const daysBetween = endMoment.diff(startMoment, 'days');
+      if (daysBetween < (this.props.dateRangeValidator.minDaysBetween || 1)
+       || daysBetween > (this.props.dateRangeValidator.maxDaysBetween || 30)) {
+        Alert.alert(
+          this.props.dateRangeValidator.msg || 'Invalid range'
+        );
+        return false;
+      }
+    }
     this.props.onConfirm && this.props.onConfirm({
       startDate: startMoment ? startMoment.toDate() : null,
       endDate: endMoment ? endMoment.toDate() : null,
diff --git a/index.ios.js b/index.ios.js
index 1bd7d20..e89038f 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -92,6 +92,11 @@ export default class calendar extends Component {
         fontWeight: 'normal'
       }
     };
+    let dateRangeValidator = {
+      minDaysBetween : 1,
+      maxDaysBetween : 30,
+      msg : 'Invalid custom range'
+    };
     const {
       startDate,
       endDate
@@ -115,6 +120,7 @@ export default class calendar extends Component {
           ref={(calendar) => {this.calendar = calendar;}}
           customI18n={customI18n}
           customStyles={customStyles}
+          dateRangeValidator={dateRangeValidator}
           format="YYYYMMDD"
           minDate="20170510"
           maxDate="20180412"